Question

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 1

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;
}