Ionic 2 - Google Maps Native: marker click event not firing

Question

I am using Ionic 2 and the google maps cordova plugin.

"cordova-plugin-googlemaps": "^2.0.11"

I cannot get this listener to fire.

The marker is added to the map but the click event does not fire the alert.

Thanks for the help!

    let latlng = new LatLng(spot.lat, spot.long);
    let markerOptions: MarkerOptions = {
        'position': latlng,
        'animation': 'drop'
      };


      this.map.addMarker(markerOptions).then((marker: Marker) => {
        marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe(e => {
          alert('foo');
        });
      });

Additional Information

@ionic-native/core: 'version': 3.7.0

@ionic-native/google-maps: 'version': '4.3.0'

import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, CameraPosition, MarkerOptions, LatLng, Marker } from '@ionic-native/google-maps';

I am looping through multiple lat long coordinates and adding them to the map. The event never gets fired for any of them.

When I try to attach the even to just one of the markers it does not work either.

Lastly if I put another alert it does not fire. Is it possible the add marker promise is not resolving?

this.map.addMarker(markerOptions).then((marker: Marker) => {
   alert('in here'); 
 marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe(e => {
   alert('foo');
 });
});

Answer 1

You should try this. It worked fine for me

marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe((latLng: LatLng) => {
    // do something
});

Answer 2

You need to use @ionic-native/[email protected] and @ionic-native/[email protected]. At least @ionic-native/[email protected] is too old.

$> npm uninstall @ionic-native/core @ionic-native/google-maps
$> cordova plugin rm cordova-plugin-googlemaps

$> npm install @ionic-native/core@latest @ionic-native/googlemaps@latest
$> cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..." --no-fetch

From the @ionic-native/[email protected], the way of creating a map is changed.

export class HomePage {

  map: GoogleMap;

  constructor() {  // <-- no longer need to define in constructor
  }

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {
    this.map = GoogleMaps.create('map_canvas');  // <-- changed
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      ...
    });
  }
}