Question

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?

Answer 1

You can try with :

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