MrUpsidown MrUpsidown - 6 months ago 41
Javascript Question

Google Maps API v3 resize event

Using Maps API v3. As per Google documentation, if the map container is resized programmatically, the map resize event must be triggered manually.

Resize event: Developers should trigger this event on the map when the div changes size.

Therefore I am using:

google.maps.event.trigger(map, 'resize');


Which listener should I be using to update my markers based on the new bounds of the resized map container?

google.maps.event.addListener(map, 'resize', function() {

console.log(map.getBounds());
});


The above still shows the bounds before resizing.

Answer

Whenever the map is resized, the bounds will chage. Therefore, you can use the bounds_changed event:

google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
}

It has the following description:

This event is fired when the viewport bounds have changed.


If you only want the event to be called after the map is resized, you can use a boolean variable to track whether the map has just been resized, like so:

var mapResized = false;

Then, whenever you trigger the resize function, you can set the mapResized variable to true. You can do so using a function:

function resizeMap(map) {
    google.maps.event.trigger(map, 'resize');
    mapResized = true;
}

Then, in the bounds_changed event, you can only react to call if mapResized is true, and afterwards set mapResized to false:

google.maps.event.addListener(map, 'bounds_changed', function() {
    if (mapResized) {
        // react here
    }
    mapResized = false;
}