如何使用dburles：google-maps流星包显示热图？

Question

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 and got the map to show markers just fine. Then I tried to display a heatmap and it's causing an error, I can't resolve - " Uncaught InvalidValueError: setMap: not an instance of Map(anonymous function) "

Console output can be seen here - http://improveit.meteor.com/map

 Template.map.helpers({ issueMapOptions: function() { // Make sure the maps API has loaded if (GoogleMaps.loaded()) { // Map initialization options return { 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); }); }); 

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

Answer 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:

Answer 2

 Template.map.helpers({ issueMapOptions: function() { // Make sure the maps API has loaded if (GoogleMaps.loaded()) { // Map initialization options return { 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); }); }); 

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