javascript - How to display a heatmap using dburles:google-maps Meteor package? -
update: code below fixed per accepted answer , confirmed working.
i'm bit stuck meteor, please me out. i've installed dburles:google-maps package , got map show markers fine. tried display heatmap , it's causing error, can't resolve - "uncaught invalidvalueerror: setmap: not instance of map(anonymous function)"
console output can seen here - http://improveit.meteor.com/map
template.map.helpers({ issuemapoptions: function() { // make sure 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() { // can use `ready` callback interact map api once map 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 display issues , severity</p> <div class="map-container"> {{> googlemap name="issuemap" options=issuemapoptions}} </div> </template>
change line:
heatmaplayer.setmap(issuemap);
to
heatmaplayer.setmap(issuemap.instance);
the setmap method requires google map instance. callback of .ready
not directly provide has options
object convenience.
i confirmed works on site:
Comments
Post a Comment