Google Maps API v3 resize event

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:

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

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

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

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

Answer 2

If you want to know when the bounds change, you need to listen for the "bounds_changed" event

google.maps.event.addListener(map, 'bounds_changed', function() {
    console.log(map.getBounds());
});

If you only want the first bounds changed event after you trigger the resize event, you can use:

google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    console.log(map.getBounds());
});

right before you trigger the resize event.

Answer 3

On Angular.js and IONIC I solved by insering this code after the **

declaration of var map = new google..... :
google.maps.event.addListenerOnce(map, 'bounds_changed', function () {
   google.maps.event.trigger(map, 'resize');
   var bounds = map.getBounds();
});