I am combining and visualizing multiple data sources based on the example available in the developers.google.com website and it's working fine for displaying a full state, you can see the result here.
Now, I need to display sub-part of state and so I need centering and zooming on the visible polygons and not on all the polygons.
You can see my test here
As you will see, the map is not centered properly!
I am using the following code :
var bounds = new google.maps.LatLngBounds();
map.data.addListener('addfeature', function(e) {
processPoints(e.feature.getGeometry(), bounds.extend, bounds);
map.fitBounds(bounds);
});
function processPoints(geometry, callback, thisArg) {
if (geometry instanceof google.maps.LatLng) {
callback.call(thisArg, geometry);
} else if (geometry instanceof google.maps.Data.Point) {
callback.call(thisArg, geometry.get());
} else {
geometry.getArray().forEach(function(g) {
processPoints(g, callback, thisArg);
});
}
}
I probably needs to update the processPoints function, but I don't know what to do...