Meteor Js Google Maps not rendered

Question

I have this event from myGroup Template:

'click #details': function(e){
    // Prevent default actions
    e.preventDefault();
    // Get groupid
    var groupId = e.target.name
        group = Groups.findOne(groupId)
        lat = group.destination.location.lat
        lon = group.destination.location.lon
    Session.set('lat', lat);
    Session.set('lon', lon);
    Router.go('/group/'+groupId);
}

This event, as you can see, create two session variables and then redirect to another Template called groupMap.

I have this code to run when groupMap is rendered:

Template.groupMembers.rendered = function(){
 var map;
 var infowindow;
 var lat = Session.get("lat");
 var lon = Session.get("lon");
 console.log(lat,lon)

 function initialize() {
var location = new google.maps.LatLng(lat, lon);
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: location,
    zoom: 15
  });
  var request = {
    location: location,
    radius: 500,
    types: ['store']
  };
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}
 function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}
google.maps.event.addDomListener(window, 'load', initialize)
};

It is a simple code that take the previous two variables and then render a map centered in lat and lon, and display some google places markers.

NOTE1: I load the googlemap api on the header

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

My problem is: When I click on #details the event work well(create the variables and redirect), after redirect I can see the two variables displayed at the console but the map never render. If I reload the page de map render in blank because the variables disappear and if I change something in the code to trigger the Meteor hot-reload the map will render well.

What can I do to fix this ? (I need to render the map on the 1st load)

Answer 1

The source of your problem lies within the last line of your code:

google.maps.event.addDomListener(window, 'load', initialize)

With this line, you are basically telling your app to initialize the map when the window is loaded. (duh, right?) It's good, when you expect the page to still be loading when calling that statement. But in Meteor, this "windows is loaded" event occurs very few times during your app's runtime: when loading a page of your app "for the first time" on your browser (or pressing F5), and on hot-code reloads.

From that moment on, your app will no longer trigger any more load event on your window (as opposed to multi-pages apps, which "reload" each page as you navigate through them), unless of course you programmatically trigger one in your code.

This is why your map only shows on hot-code reloads. Only then are both your listener active and the window's loaded event being triggered, hence triggering your initialize function.

What you want in your case is to trigger the map every time the template is rendered. To achieve that, what you just need is to call your initialize() function within your rendered hook. Here's an example based on what you have (using the new correct onRendered function):

Template.groupMembers.onRendered(function(){
 var map;
 var infowindow;
 var lat = Session.get("lat");
 var lon = Session.get("lon");
 console.log(lat,lon)

 function initialize() {
var location = new google.maps.LatLng(lat, lon);
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: location,
    zoom: 15
  });
  var request = {
    location: location,
    radius: 500,
    types: ['store']
  };
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}
 function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}
initialize();
});