0

I'm trying to implement native google maps in my ionic 2 project but i get an error to set markers clickable. this is my code to draw markers:

for (var i = 0; i < mapMarkers.length; i++) {
                var centerMarker = mapMarkers[i];
                 let location = new GoogleMapsLatLng(centerMarker.lat, centerMarker.long);
                let MarkerDetails = centerMarker.name ;
                let markerOptions = {
                  position: location, title: MarkerDetails ,snippet:centerMarker.distance , icon:this._MapService.markerImg
               };
     this.map.addMarker(markerOptions)
                  .then( (marker: GoogleMapsMarker) => {
                    console.log('centerMarker.ID'+centerMarker.ID)
                     marker.addEventListener(GoogleMapsEvent.INFO_CLICK).subscribe(
                        ()=>{
                            this.navToCenter(centerMarker.ID);
                        }
                    );
                });
            }

it appears on the map but my problem here is

this.navToCenter(centerMarker.ID);

always go to the last marker.

I'm using GoogleMap class from ionic-native to create the map as on documentation here : https://ionicframework.com/docs/v2/native/google-maps/ also i know that the problem because of promises like the description on plugin documentation https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Marker#create-multiple-markers

I need any way to handle this solution using ionic2 GoogleMap class & Typescript. regards.

Mohammed Agwa
  • 53
  • 1
  • 8

0 Answers0