Using the package with Iron Router

[ghost]

I'm attempting to get the basic create example working in my app.

HTML:

<template name = "mapPanel">
  <div style="width: 100%; padding-right: 0px; height: 300px;" id="exampleMap">
  </div>
</template> 

JS:

Template.mapPanel.onRendered(function() {
    GoogleMaps.create({
        name: 'exampleMap',
        element: document.getElementById('exampleMap'),
        options: {
            center: new google.maps.LatLng(-37.8136, 144.9631),
            zoom: 8
        }
    });
});

Everything works, except when I manually refresh the page (e.g. site.com/path).

Then the map doesn't load, and I'm getting "Exception from Tracker afterFlush function: ReferenceError: google is not defined"

Thinking that this is due to the JS running before template is ready. Does anyone know of any way to elegantly fix this?

[dburles]

Hey @yournewbase you'll need to use GoogleMaps.loaded() to make sure that the library has loaded before calling create.

Template.mapPanel.onRendered(function() {
  this.autorun(function() {
    if (GoogleMaps.loaded()) {
      GoogleMaps.create({
        name: 'exampleMap',
        element: document.getElementById('exampleMap'),
        options: {
          center: new google.maps.LatLng(-37.8136, 144.9631),
          zoom: 8
        }
      });
    }
  });
});

[ghost]

@dburles Ah, that's it! It works now, thank you.