title: Google HeatMap API throws 2 error messages: H/M is not defined
body: <p>I have been trying to implement a very simple demo of Google HeatMap for hours.
  I almost copied everything from the demo page(on the google map api documentation)
  Here is the 2 error messages:</p>
  
  <ol>
  <li>Uncaught ReferenceError: H is not defined HeatMap.html:6</li>
  <li>Uncaught ReferenceError: M is not defined </li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/2dJyo.png" alt="enter image description here"></p>
  
  <p>and here is the code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry,visualization&amp;sensor=true"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      // Adding 500 Data Points
      var map, pointarray, heatmap;
  
      var taxiData = [
        new google.maps.LatLng(37.782551, -122.445368),
        new google.maps.LatLng(37.782745, -122.444586),
        new google.maps.LatLng(37.782842, -122.443688),
        new google.maps.LatLng(37.782919, -122.442815),
        new google.maps.LatLng(37.782992, -122.442112),
        new google.maps.LatLng(37.783100, -122.441461),
        //...........so many data here, skip...........
        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)
      ];
  
      function initialize() {
          var mapOptions = {
              zoom: 13,
              center: new google.maps.LatLng(37.774546, -122.433523),
              mapTypeId: google.maps.MapTypeId.SATELLITE
          };
  
          map = new google.maps.Map(document.getElementById('map_canvas'),
              mapOptions);
  
          pointArray = new google.maps.MVCArray(taxiData);
  
          heatmap = new google.maps.visualization.HeatmapLayer({
              data: pointArray
          });
  
          heatmap.setMap(map);
      }
  
      function toggleHeatmap() {
          heatmap.setMap(heatmap.getMap() ? null : map);
      }
  
      function changeGradient() {
          var gradient = [
            'rgba(0, 255, 255, 0)',
            'rgba(0, 255, 255, 1)',
            'rgba(0, 191, 255, 1)',
            'rgba(0, 127, 255, 1)',
            'rgba(0, 63, 255, 1)',
            'rgba(0, 0, 255, 1)',
            'rgba(0, 0, 223, 1)',
            'rgba(0, 0, 191, 1)',
            'rgba(0, 0, 159, 1)',
            'rgba(0, 0, 127, 1)',
            'rgba(63, 0, 91, 1)',
            'rgba(127, 0, 63, 1)',
            'rgba(191, 0, 31, 1)',
            'rgba(255, 0, 0, 1)'
          ]
          heatmap.setOptions({
              gradient: heatmap.get('gradient') ? null : gradient
          });
      }
  
      function changeRadius() {
          heatmap.setOptions({ radius: heatmap.get('radius') ? null : 20 });
      }
  
      function changeOpacity() {
          heatmap.setOptions({ opacity: heatmap.get('opacity') ? null : 0.2 });
      }
  
      $(document).load(function () {
  
      });
  
      $(document.body).on("onload", initialize);
  
  &lt;/script&gt;
  
  &lt;script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/9/%7Bcommon,map,util,onion,visualization_impl%7D.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/9/%7Bstats,controls%7D.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/11/9/%7Bmarker%7D.js"&gt;
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
      &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>