How To Display A Heatmap Using Dburles:google-maps Meteor Package?

UPDATE: Code below is fixed as per accepted answer and is confirmed to be working. I'm a bit stuck with Meteor, please help me out. I've installed the dburles:google-maps package

Solution 1:

Change this line:

heatMapLayer.setMap(issueMap);

to

heatMapLayer.setMap(issueMap.instance);

The setMap method requires a google map instance. the callback of .ready does not directly provide this as it also has an options object for extra convenience.

I confirmed it works on your site:

Solution 2:

Template.map.helpers({
  issueMapOptions: function() {
    // Make sure the maps API has loadedif (GoogleMaps.loaded()) {
      // Map initialization optionsreturn {
        zoom: 13,
        center: new google.maps.LatLng(37.774546, -122.433523),
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        mapTypeControl: false,
        panControl: false,
        streetViewControl: false
      };
    }
  }
});

Template.map.onCreated(function() {
  // We can use the `ready` callback to interact with the map API once the map is ready.GoogleMaps.ready('issueMap', function(issueMap) {
    

    var issueData = [
      new google.maps.LatLng(37.782551, -122.445368),
      new google.maps.LatLng(37.757676, -122.405118),
      new google.maps.LatLng(37.757039, -122.404346),
      new google.maps.LatLng(37.756335, -122.403719),
      new google.maps.LatLng(37.755503, -122.403406),
      new google.maps.LatLng(37.754665, -122.403242),
      new google.maps.LatLng(37.753837, -122.403172),
      new google.maps.LatLng(37.752986, -122.403112),
      new google.maps.LatLng(37.751266, -122.403355)
    ];       
      
      
      var issueArray = new google.maps.MVCArray(issueData);
      
       var heatMapLayer = new google.maps.visualization.HeatmapLayer({
            data: issueArray,
            radius: 20
        });
      

      heatMapLayer.setMap(issueMap.instance);
      
      
  });
});

<templatename="map"><h1>Issue heat map</h1><p>This map will display issues and their severity</p><divclass="map-container">
    {{> googleMap name="issueMap" options=issueMapOptions}}
  </div></template>