2

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.

Laurent
  • 2,284
  • 2
  • 21
  • 41
  • You may need to put the Googlemaps.ready code in OnRendered particularly if you are referencing the DOM – bluebird Oct 23 '15 at 20:22
  • Sorry read too fast and did not realize the problem wasonCordova. Do you have a mobile-config.js set up with access rules for Google Api? – bluebird Oct 23 '15 at 20:26
  • oh my god you're right bluebird, just write it as an answer, i'll accept it ! it was very stupid of me i forgot to set the `mobile-config.js` – Laurent Oct 23 '15 at 21:42

1 Answers1

2

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

bluebird
  • 640
  • 4
  • 9