iosnode.jscordovameteoriron-router

Meteor GoogleMaps.load() not working on iOS with Iron


I'm trying to load a simple map with a marker on a page with Meteor. I'm using the GoogleMaps package and Iron.

The map is showing up correctly in my browser but when I try it out with iOS Simulator (iPhone 6 / iOS 8.3) it just never loads : it's auto-running, returning systematically false on GoogleMaps.loaded() ...

On the other side, Geolocation is correctly returning a position.

Here's a repository I setup to see the whole problem : https://github.com/Loschcode/meteor-iron-google-maps-issue

The important lines might be the GoogleMaps package setup :

#
# Helpers
#
Template.GeoMap.helpers {

  geolocationError: =>

    error = Geolocation.error()
    return error and error.message

  mapOptions: =>

    latLng = Geolocation.latLng()

    if (Meteor.isCordova)
      alert(GoogleMaps.loaded())

    # Initialize the map once we have the latLng.
    if GoogleMaps.loaded() and latLng

      if (Meteor.isCordova)
        alert('GoogleMaps.loaded')

      return {
        center: new google.maps.LatLng(latLng.lat, latLng.lng)
        zoom: @MAP_ZOOM
      }

}

And the process :

#
# onCreated
#
Template.GeoMap.onCreated =>

  GoogleMaps.load()

  if (Meteor.isCordova)
    alert('GoogleMaps.load')

  # When it's ready, we process the position
  GoogleMaps.ready 'geoMap', (map) =>

    # THIS IS NEVER FIRED

I'm not sure it's a human mistake or an issue, but it's been hours i'm on it and i really don't get it

NOTE : In my test repo I let the some alert() to fire on iOS to see the problem clearly.

Any idea on the problem ? Sorry for the CoffeeScript and the Iron structure.


Solution

  • When using external API's on Cordova, you need to have a mobile-config.js file configured in the top level of your project directory.

    For google api's, your mobile-config.js would look like

    App.accessRule('*.googleapis.com/*');
    

    docs