Monday, May 20, 2024
193
rated 0 times [  200] [ 7]  / answers: 1 / hits: 33821  / 12 Years ago, sun, august 19, 2012, 12:00:00

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.


More From » google-maps-api-3

 Answers
41

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

[#83544] Friday, August 17, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
raymondd

Total Points: 620
Total Questions: 112
Total Answers: 94

Location: Namibia
Member since Mon, Feb 21, 2022
2 Years ago
raymondd questions
Thu, Apr 22, 21, 00:00, 3 Years ago
Thu, Jul 9, 20, 00:00, 4 Years ago
Thu, Apr 9, 20, 00:00, 4 Years ago
Thu, Jul 25, 19, 00:00, 5 Years ago
;