Hi all !
I’m trying to get several markers on a simple google map. I’m using Ionic 3.
I’m loading the map like this :
import { Component, ViewChild, ElementRef } from '@angular/core';
import { GoogleMaps } from '@ionic-native/google-maps';
declare var google;
export class SearchResultsPage extends BasePage {
@ViewChild('map') mapElement: ElementRef;
private map: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private translateService: TranslateService,
private googleMaps: GoogleMaps) {}
ionViewDidLoad() {
setTimeout(()=>{
this.loadMap();
}, 1000)
}
addMarkers(data, callback) {
var markers = [{
'position': {
lat: 48.8513735,
lng: 2.3861292
},
'icon': '#ff0000'
}];
function onMarkerAdded(marker) {
console.log(marker);
markers.push(marker);
if (markers.length === data.length) {
callback(markers);
} else {
console.log('in the else');
}
}
data.forEach(function(markerOptions) {
console.log('in foreach');
this.map.addMarker(markerOptions, onMarkerAdded);
});
}
loadMap() {
let latLng = new google.maps.LatLng(48.8513735, 2.3861292);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}
}
The map is showing, but not the markers. If someone has an idea, thanks by advance.