1

I'm using google map API to show Heat-map. After zooming one level, I want the heat-map area to show in the center of the map. I'm attaching the image also, it that you can see the heatmap at the bottom of the map.

render: function() {
    var results = this.model.get('results');
    if (!results)
            return this;

    var data = results[this.model.get('index')];
    if (!data)
            return this;

    if (!data.data.length) {
        data.data.push({
            count: 0,
            lat: 0,
            lng: 0
        });
    }
    showHeatMapData(data);
    var startTime = this.model.get("starttm");
    if(startTime >= 1436985000 && startTime <= 1437244199)
    {
        $("#pichart").show();
    }
    else
    {
        $("#pichart").hide();
    }

    this.heatmap.setData(data);
    this.map.setZoom(20);
    return this;
}

enter image description here

lalibi
  • 3,057
  • 3
  • 33
  • 41
Suparna
  • 85
  • 2
  • 14
  • 1
    so you have an array of points you use for your heatmap. You should be able to create a LatLngBounds using those, which you can then get the centre of. – duncan Dec 10 '15 at 11:17
  • 1
    Possible duplicate of [Center/Set Zoom of Map to cover all visible Markers?](https://stackoverflow.com/questions/19304574/center-set-zoom-of-map-to-cover-all-visible-markers) – ykay says Reinstate Monica Sep 13 '18 at 10:10

3 Answers3

1

to zoom and fit the map to all the points:

this.heatmap.setData(data);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < data.length; i++) {
    bounds.extend(data[i]);
}
this.map.fitBounds(bounds);
geocodezip
  • 158,664
  • 13
  • 220
  • 245
0

i am guessing you have a longitude and latitude contains array somethings looks like 

 var locationarray = [];

 locationarray[0] = new google.maps.LatLng(13.74428, 100.5404525);
 locationarray[1] = new google.maps.LatLng(13.744108, 100.543098);

now when you done loading other functions, you can just simply set the map center from your location array, like this 

map.setCenter(locationarray[0]);

i hope this will help you.

nur farazi
  • 1,197
  • 12
  • 32
  • 1
    he has an array of coordinates, that'll just set the center to be the first of those, not the centre of the heatmap – duncan Dec 10 '15 at 12:49
0

Try this:

this.heatmap.setData(data);

var bounds = new google.maps.LatLngBounds();

for (var i = 0; i < data.length; i++) {
    bounds.extend(data[i]);
}

this.map.setCenter(bounds.getCenter());
this.map.setZoom(20);
duncan
  • 31,401
  • 13
  • 78
  • 99
  • I tried it with my heatmap and it worked as well, the problem with your answer is that the zoom isn't necessarily set correctly depending on the dispersion of the points, btw i upvoted your answer as it is was helpful, just better to use map.fitBounds as in the other question and answer – ykay says Reinstate Monica Sep 13 '18 at 11:45