Google Maps Javascript API v3 with Heatmap Layer

JavaScript
1

I have several pages in a web app that I’m trying to use Google Maps JS API with heatmap layers to show analytics. I’m getting the data with a local JSON file.

initMaps() get’s called first and runs createMap() with different arguments depending on what ID is available in the HTML. I’ve tested this, and it is passing in the correct data. I’ve also tested the JSON data, and it is getting and passing the data into the arrays for use in the map. See my highlighted comments in the code to see where it’s breaking. Sometimes it works, and sometimes it doesn’t. I get inconsistent errors in the console:

undefined is not a function

Cannot read property ‘HeatmapLayer’ of undefined (This is the only one that points to my code - the visualization.HeatmapLayer line.)

Cannot set property ‘Kj’ of undefined


function refreshMapAnalytics(){
  $jq.getJSON(jsonFile, function(jsonData){
    var map,
        infowindow,
        heatmap,
        heatmapData;
    var currentMapID;
    var whichMap;
    var storeLat,
        storeLng,
        storeLocation;

    //Data Table Radio Btns
    $jq('.map-radio').change(function(){
      initMaps();
    });

    function findWhichMap(){
      if($jq('input[name=choose-map]:checked').val()==='Clicks'){
        return "Clicks";
      } else {
        return "Views";
      }
    }//end findWhichMap()

    function createMap(mapLocation, jsonSection){
      //remove data from arrays
      lats = [];
      lngs = [];
      markers = [];
      heatmapData = 0;
      currentMapID = $jq('input[name=choose-map-location]:checked').val();
      whichMap = findWhichMap();

      if(currentMapID == 'allIDs'){
        storeLocation = new google.maps.LatLng(0, 0);
      } else if(currentMapID != 'allIDs'){
        storeLat = jsonData.Maps[jsonSection][currentMapID].Store.Latitude;
        storeLng = jsonData.Maps[jsonSection][currentMapID].Store.Longitude;
        storeLocation = new google.maps.LatLng(storeLat, storeLng);
      }

      for(var i = 0; i < jsonData.Maps[jsonSection][currentMapID][whichMap].length; i++){
        lats.push(parseFloat(jsonData.Maps[jsonSection][currentMapID][whichMap][i].Latitude));
        lngs.push(parseFloat(jsonData.Maps[jsonSection][currentMapID][whichMap][i].Longitude));
        markers.push(new google.maps.LatLng(parseFloat(lats[i]), parseFloat(lngs[i])));
      }

      var mapOptions = {
        minZoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: storeLocation
      };
      map = new google.maps.Map(mapLocation, mapOptions);
      heatmapData = new google.maps.MVCArray(markers);
      [COLOR="#008000"]console.log(markers); //works[/COLOR]
      heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapData
      });
      [COLOR="#FF0000"]console.log(markers); //doesn't work[/COLOR]
      heatmap.setMap(map);
      heatmap.setOptions({
        opacity: .5
      });
      var i = 0;
      var latlngbounds = new google.maps.LatLngBounds();
      for (var i; i<markers.length; i++){
        latlngbounds.extend(markers[i]);
      }
      map.fitBounds(latlngbounds);
    }//end createMap()

    function initMaps(){
      console.log("initMaps()");
      var locationMap = document.getElementById('locationMap'),
          guideMap = document.getElementById('guideMap'),
          promotionMap = document.getElementById('promotionMap'),
          eventMap = document.getElementById('eventMap'),
          bannerMap = document.getElementById('bannerMap'),
          featuredMap = document.getElementById('featuredMap');

      if (locationMap){//if on page
        createMap(locationMap, 'Locations');//create map [here] with [this data]
      } else if (guideMap){
        createMap(guideMap, 'Guides');
      } else if (promotionMap){
        createMap(promotionMap, 'Promotions');
      } else if (eventMap){
        createMap(eventMap, 'Events');
      } else if (bannerMap){
        createMap(bannerMap, 'Banners');
      } else if (featuredMap){
        createMap(featuredMap, 'FeaturedAds');
      }
    }//end initMaps()
    initMaps();
  });//end JSON
}//end refreshMapAnalytics()

Thanks for any help troubleshooting this.