title: Google maps heatmap data points are not displaying
body: <p>Building a server side app which will be using the google maps api for weighted heat maps to display some data.</p>
  
  <p><a href="https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps" rel="nofollow">https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps</a></p>
  
  <p>However, my JS is not displaying the data points (displaying the map perfectly well). Any ideas?</p>
  
  <pre><code>  function initialize() {
  
      var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(37.774546, -122.433523),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
      var heatmapData = [
        {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
        new google.maps.LatLng(37.782, -122.445),
        {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
        {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
        {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
        new google.maps.LatLng(37.782, -122.437),
        {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},
  
        {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
        {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
        new google.maps.LatLng(37.785, -122.443),
        {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
        new google.maps.LatLng(37.785, -122.439),
        {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
        {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
      ];
  
      var heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatMapData
      });
  
      heatmap.setMap(map);
  
    }
  
    function loadScript() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=visualization&amp;callback=initialize';
      document.body.appendChild(script);
    }
  
    function toggleHeatmap() {
      heatmap.setMap(heatmap.getMap() ? null : map);
    }
  
    function changeOpacity() {
      heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
    }
  
    window.onload = loadScript;
    google.maps.event.addDomListener(window, 'load', initialize);
  
    initialize();
  </code></pre>
  
  <p>Edit 1 - Chrome logs this:</p>
  
  <pre><code>Uncaught ReferenceError: google is not defined heatmap:68
  Uncaught ReferenceError: heatMapData is not defined heatmap:45
  event.returnValue is deprecated. Please use the standard event.preventDefault() instead. VM1930:45
  GET https://maps.googleapis.com/maps/gen_204?ev=api_viewport&amp;cad=host:localhost…98x0.65918,size:1920x689,relsize:1.00,token:4b2u2h59g8,src:apiv3,ts:viv6jz net::ERR_BLOCKED_BY_CLIENT VM1937:1
  GET https://maps.googleapis.com/maps/gen_204?imp=smimps%3DDCyUJvj7n5l,ZvwOO2ZR5…_mlil,HRlFM3ZVJGn,Jx3V5n-JzIn,F-E4oUlMhVs%26z%3D12&amp;cad=src:apiv3,ts:viv6n3 net::ERR_BLOCKED_BY_CLIENT VM1937:1
  GET https://maps.googleapis.com/maps/gen_204?imp=smimps%3DMQc6u1JFizM,0Dl57QyKHf%26z%3D12&amp;cad=src:apiv3,ts:viv6rc net::ERR_BLOCKED_BY_CLIENT VM1937:1
  GET https://maps.googleapis.com/maps/gen_204?imp=smimps%3DOk5Wmy33jdt,Dw5TFMIYSGt%26z%3D12&amp;cad=src:apiv3,ts:viv6tf net::ERR_BLOCKED_BY_CLIENT VM1937:1
  </code></pre>
  
  <p>Edit 2 - The Js is wrapped in this jade:</p>
  
  <pre><code>doctype 5
  html
    head
      title #{title} - picycle
      style
        html, body, #map-canvas {
          height: 100%;
          margin: 0px;
          padding: 0px
        }
        #panel {
          position: absolute;
          top: 5px;
          left: 50%;
          margin-left: -180px;
          z-index: 5;
          background-color: #fff;
  
          border: 0.2px solid #999;
        }
  
      script(type='text/javascript')
  
  &lt;JS CODE FROM ABOVE&gt;
  
    body
  
      #panel
        button(onclick='toggleHeatmap()') Toggle Heatmap
        button(onclick='changeOpacity()') Change opacity
  
      #map-canvas
  </code></pre>