Dburles:google-maps map greyed out when navigating back to map page - mobile?


#1

Hey guys,

I’m using dburles:google-maps package with Blaze and the template inclusion:

{{> googleMap name="map" options=mapOptions}}

I have a list view and a map view navigated / rendered with FlowRouter and BlazeLayout respectably.:

FlowRouter.route('/', {
  name: 'list',
  action() {
    BlazeLayout.render('App_body', { main: 'List_list'});
  },
});
FlowRouter.route('/map', {
  name: 'map',
  action() {
    BlazeLayout.render('App_body', { main: 'Map_map'});
  },
});

If I start the app or refresh the page and then navigate to the map view, the google map loads perfectly. If I navigate away from the map (to list for instance) and then back to map, the google map is just grey.

Here is some of my other map code:

Template.Map_map.helpers({
  mapOptions() {
    if (GoogleMaps.loaded()) {
      const center = new google.maps.LatLng(44.477553, -73.199853);
      return {
        center,
        zoom: 16,
      };
    }
  },
});

…and I call GoogleMaps.load(); in onCreated.

Thanks for the help guys!


#2

I’ve tried doing GoogleMaps.load() in a bunch of different spots to no avail. When I resize the screen on a web browser then the map comes back (can’t do that on mobile obviously).

Thoughts?


#3

The problem in a web browser was with the momentum package. Put the map template outside of the momentum area and you’re good to go. Still not sure about mobile.