CODEWITHSUNDEEP
ajaxgoogle-maps-api-3
Question Overflow
Question Overflow

Reputation: 11255

Google Map does not detect bounds changed upon resize dynamically

I have an AJAX map query function that is triggered whenever the page loads or the map (500x500px) is dragged or zoomed:

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

 var bounds = map.getBounds();
 // do something

});

I also have a button that triggers a resize of this map to the extent of the browser window. Upon clicking, I realise that the map bounds remains as 500x500px even though the map stretches across the entire window, causing the map tiles to be incompletely loaded.

Here is the partial code for the resizing:

$(document).ready(function() {
 $('button').click(function() {
  $('#map').css({'height': new_height, 'width': new_width});
 }
});

Dragging the map around doesn't solve the problem. Google Map detects the new map bounds only when I click on the maximise/restore button of the browser. How to go around solving this problem without the manual effort?

Upvotes: 0

Views: 557

Answers (1)

tusar
tusar

Reputation: 3424

You can try with :

$(document).ready(function() {
    $('#button').click(function() {
        $('#map').css({'height': new_height, 'width': new_width});
        google.maps.event.trigger(map, 'resize');
    });
});

Upvotes: 3

Related Questions