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.