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.
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.
Share Improve this question edited Aug 19, 2012 at 22:40 jeff 8,3482 gold badges34 silver badges43 bronze badges asked Aug 19, 2012 at 22:15 MrUpsidownMrUpsidown 22.5k15 gold badges82 silver badges139 bronze badges3 Answers
Reset to default 16Whenever 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;
}
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.
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();
});