I am using google maps javascript sdk to display a map and I would like to display as markers a number of locations on the map. Using the code below I have been able to do this when viewing in the browser but when I view it on a device (android or ios) the map appears but the markers do not. I am new to arrow functions and observables so not sure I am doing this right. The data is being returned from getLocationsByLatLong and the addMaker function is firing when running in Chrome on my development machine. I’m assuming it is also happening on the device and the markers just aren’t displaying but I’m not sure how to tell for sure. Any thoughts on why this might not be working on the device?
This is the function to add the markers to the map.
this.geoProvider.getLocationsbyLatLong(this.segments[0].lat, this.segments[0].lng, this.getMiles(segmentLength)).subscribe(data => {
for (let location of data) {
this.addMarker(location.latitude, location.longitude, location.brewery.name, location.streetAddress);
}
});
And the add maker function.
addMarker(lat, lng, breweryName, breweryAddress) {
console.log("Marker Fired");
let marker = new google.maps.Marker({
map: this.map,
visible: true,
position: new google.maps.LatLng(lat, lng)
});
}
Development: Windows 10
Testing: Browser - Google Chrome
Device Testing - Ionic View on iOS and Android
