Google Map Makers Show in ionic lab but not device

#1

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

#2

are you using custom marker?

#3

Not at this point. I am just trying to get standard markers to display.

#4

It turns out that this was due to a cross origin issue. In the browser I was handling cross origin requests via plugin but did not realize the same thing needed to be done ionic view. I just created a simple proxy to access the service and everything worked.

#5

Try native SDK version or Angular Maps:
https://angular-maps.com

If you follow instructions on Angular maps website, it will work fine.
Angular maps is a wrapper for javascript sdk and it works fine on Ionic.

#6

I use the JavaScript SDK and custom markers on Android and iOS:

See:

#7

I think Angular Maps is the best…

Native SDK still works too.