Search code examples
ionic-frameworkionic2cordova-plugins

Ionic 2 & Cordova Map Plugin Marker drag issue


I am using the cordova map plugin. I have added the marker & added the MARKER_DRAG_END event. Event also get fired but in promise I am not getting the new latlng of the marker. Can you please let me know how can we achieve this ?

this.map.addMarker({
            'position': location,
            'icon': 'green',
            'title': "Pickup Location",
            'draggable': true
            //,'animation': google.maps.Animation.DROP
          }, function(marker) {
            alert('addMarker callback started.');
            //this.addUpdateMarkerData('pickup',marker,location);                
            //marker.showInfoWindow();

              //Drag event of marker
              marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_END, function(marker) {
                alert('GoogleMapsEvent MARKER_DRAG_END');
                marker.getPosition(function(latLng) {
                  alert('GoogleMapsEvent.MARKER_DRAG_END Lat ~ '+latLng.lat() + ' And Long ~ '+latLng.lng())
                  //marker.setTitle(latLng.toUrlValue());
                  //marker.showInfoWindow();


                });
              });

          });

Solution

  • You have to subscribe to event listener to get the position data and getPOsition() returns promise

     marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_END).subscribe(
                            data => {
                                marker.getPosition().then((LatLng) => {
                                    alert('GoogleMapsEvent.MARKER_DRAG_END Lat ~ '+latLng.lat() + ' And Long ~ '+latLng.lng())
                      //marker.setTitle(latLng.toUrlValue());
                      //marker.showInfoWindow();
                                });
                            });