Map works once / CSS height issues

Hi im using iron router to load a template than contains a GoogleMap, it works perfectly the first time you navigate to the the route, but when access again, the map not work. Heres the code

Template.appraisalGeolocation.created = function() {
    GoogleMaps.load({v: '3', key: '12345', libraries: 'geometry'});
    GoogleMaps.ready('geolocation', geolocation.readyHandler);
}

[ldong]

I had the similar issue, instead of putting googleMap in a template,

  <div class="map-container">
    {{> googleMap name="exampleMap" options=exampleMapOptions}}
  </div>

Just create a DOM

<div class="map" id="defaultMap"></div>

then call explicitly based on different event triggers.

Template.YourTemplateName.events({
  "click #map": function(e, t){
    if (!GoogleMaps.maps.defaultMap){
      console.log("Creating new defaultmap");
      GoogleMaps.create({
        name: 'defaultMap',
        element: document.getElementById('defaultMap'),
        options: {
          center: new google.maps.LatLng(37.72,-122.45),
          zoom: 8
        }
      });
    }
});

[mattiemoon]

Hello.

The test app helped me find the problem after cutting out reems of code. Turns out a CSS class was causing the problem. From my example above, if I chuck away the following:

<div id="myContent" class="hide">

Everything works fine no matter how may times I leave and re-render the template containing the maps. The “hide” class was going to be used to handle some transition animations, and doesn’t actually map to anything concrete yet - my assumption is that code in my router file (that once the styles were defined) was running, and the timing of this versus the maps rendering was causing the problem (speculation again though - I’m new to most of this):

// This one was supposed to hide the current content
Router.onBeforeAction(function() {
  setTimeout(function () {
    $('#myContent').removeClass("fadeIn");
  });

  setTimeout(function () {
    $('#myContent').addClass("hide");   
  });
});

// This one was supposed to reveal the new content
Router.onAfterAction(function() {
  setTimeout(function () {
    $('#myContent').removeClass("hide");
  });

  setTimeout(function () {
    $('#myContent').addClass("animated fadeIn");
  });
});

I’m going to bin that and find another solution for the transitions - I’d much rather have the maps working!

Thanks again for the help @dburles; massively appreciated.