Current google-map-marker position is not correct

0
votes

I am using google-map-marker (in dom-repeat) with the event: on-google-map-marker-dragend.

I am trying to get the current position of the marker after the drag is completed, but I only get the position of the marker, where it was moved on the drag before the current drag.

<google-map zoom="15" id="map" style="height: 20em" api-key="[[apiKey]]" fit-to-markers>
            <template is="dom-repeat" items="[[markers]]" as="mapMarker">
                <google-map-marker on-google-map-marker-click="inform" on-google-map-marker-dragend="inform" click-events="true" draggable="true" drag-events="true" latitude="{{mapMarker.latitude}}" longitude="{{mapMarker.longitude}}">
                </google-map-marker>
            </template>
        </google-map>

the method:

    inform: function(event){
           // this is not the current position after drag end...
           console.log(event.model.mapMarker.latitude);
           console.log(event.target.latitude);

           this.$.userInformationLatitude.innerHTML = event.model.mapMarker.latitude;
           this.$.userInformationLongitude.innerHTML = event.model.mapMarker.longitude;
        }

Example for better understanding: I drag my marker from latitude:0 longitude:0 to New York, after the dragging is completed, I get the values latitude:0 longitude:0, not the longitude and latitude of New York.

2
javascriptgoogle-mapspolymerpolymer-1.0google-web-component
Try items="{{markers}}" also what is happening when you remove as="mapMarker" and use latitude="{{item.latitude}}". – Anees Hameed

2 Answers

0
votes

I'm using observers to catch/read the change of marker position.

Here is the example Plunk, element my-marker_drag_catch:

   //called on property this.marker_latitude change.          
    marker_latitudeChanged: function() {
      console.log('marker_latitudeChanged');
      if (this.marker_latitude) {
            this.save_marker_data();
      }
    },

    //called on property this.marker_latitude change.          
    marker_longitudeChanged: function() {
      console.log('marker_longitudeChanged');
      if (this.marker_longitude) {
            this.save_marker_data();
      }
    },
0
votes

We solved it using event.detail.latLng.lat(); and event.detail.latLng.lng(); instead of event.model...

inform: function(event){
      this.$.userInformationLatitude.innerHTML = event.detail.latLng.lat();
      this.$.userInformationLongitude.innerHTML = event.detail.latLng.lng(); 
}