Google Maps V3 - Resizing Map and Sporadic Map Tile Loading

Question

I'm using Google Maps and the JqueryUI Resizable() method (from JqueryUI 1.8.7).

If you click on the bottom-right corner of this map then you can drag and expand it. http://www.energyjustice.net/t=eb5f7o

However if you make it wider Google only provides map layers up to around 800 pixels wide. It has a similar problem if you make it taller.

If you wait a couple minutes, sometimes the full set of tiles will load. In general when you expand the map it behaves very strangely. It seems to work better in Firefox than in Chrome. Why is this happening? What can I do to avoid this sporadic behavior?

Answer 1

Once the container is resized, you need to tell the map to fill all the space available by triggering the "resize" event.

The line below worked on the page from your link (triggered from firebug after resizing)

google.maps.event.trigger(map, 'resize');

According to the JQueryUI.Resizable API documentation, calling it when the "stop" event is fired (end of resize) should do the job.

Answer 2

I have found this solution after so many efforts:

Please Add following code after map is initialize:

var idleListener = google.maps.event.addListener(map, 'idle', function() { //important for full map shown 
  google.maps.event.trigger(map, 'resize');
  // google.maps.event.removeListener(idleListener);
});

var idleListener2 = google.maps.event.addListener(map, 'mousemove', function() {
  google.maps.event.trigger(map, 'resize');
  // google.maps.event.removeListener(idleListener2);
});