Databases
StackOverflow2013
Postsdbo
POHeatmap.js not rendering
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHeatmap.js not rendering
    text
    copied!<p>I'm attempting to integrate heatmap.js with Google maps to do some visualization work. I referred to this:</p> <p><a href="http://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html" rel="noreferrer">http://www.patrick-wied.at/static/heatmapjs/example-heatmap-googlemaps.html</a></p> <p>As such, my code in my local sample looks nearly identical:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt; &lt;/script&gt; &lt;div id="heatmapArea" style="width:1024px;padding:0;height:768px;cursor:pointer;position:relative;"&gt;&lt;/div&gt; &lt;script type="text/javascript" src="js/jquery-1.8.2.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/heatmap.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/heatmap-gmaps.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; window.onload = function(){ // standard gmaps initialization var myLatlng = new google.maps.LatLng(48.3333, 16.35); // define map properties var myOptions = { zoom: 3, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: false, scrollwheel: true, draggable: true, navigationControl: true, mapTypeControl: false, scaleControl: true, disableDoubleClickZoom: false }; // we'll use the heatmapArea var map = new google.maps.Map($("#heatmapArea")[0], myOptions); // let's create a heatmap-overlay // with heatmap config properties var heatmap = new HeatmapOverlay(map, { "radius":20, "visible":true, "opacity":60 }); // here is our dataset // important: a datapoint now contains lat, lng and count property! var testData={ max: 46, data: [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24, count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1}] }; // now we can set the data google.maps.event.addListenerOnce(map, "idle", function(){ // this is important, because if you set the data set too early, the latlng/pixel projection doesn't work heatmap.setDataSet(testData); }); }; &lt;/script&gt; &lt;/html&gt; </code></pre> <p>I'm getting the google map rendering in my div as I expect, but the heatmap itself isn't rendering on the lat-long data points provided by testData.</p> <p>No errors in the browser console....</p> <p>Someone see that I'm doing something foolish here?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload