CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
user1452494
user1452494

Reputation: 1185

google maps api - heatmap.set(data) property

I am creating a simple google map with heatmap layer. Importantly, I am not setting the data property of the heatmap initially:

var map, heatmap;
var home = new google.maps.LatLng(37.75, -122.4)

function initialize() {
  var mapOptions = {
    zoom: 10,
    minZoom: 3,
    center: home,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    panControl: false,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false
  };

  var styles = [
  {
    stylers: [
      { "gamma": 0.83 },
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  map.setOptions({styles: styles});


  heatmap = new google.maps.visualization.HeatmapLayer({
    radius: 20,
    opacity: 0.5
  });

  heatmap.setMap(map);

then I create a function which should set the data property of the heatmap, like this:

  function update(){

    all = [[37.782551, -122.445368, 0.75, 0.25],
                    [37.782745, -122.444586, 0.5, 0.5],
                    [37.782842, -122.443688, 0.2, 0.8]]

    temp = []

    for (var i = 0; i < all.length; i++){
        temp.push(new google.maps.LatLng(all[i][0], all[i][1]), all[i][2])
    }


    var newdata = new google.maps.MVCArray(temp);
    heatmap.set('data', heatmap.get('data') ? null : newdata)


  }

finally, i call the update function in a bounds_changed event and initialize the map:

  google.maps.event.addListener(map, 'bounds_changed', function() {
    update;
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

However, when I inspect the heatmap variable in the console, the data property is null. Why is this? and how do I set the data property in a function call?

Upvotes: 1

Views: 3245

Answers (1)

geocodezip
geocodezip

Reputation: 161334

calling heatmap.set('data', heatmap.get('data') ? null : newdata); is problematic.

Remove that and it works.

working fiddle

Upvotes: 2

Related Questions