Major Google Maps Glitch Using Api V3

edit: this is now solved, see my answer below The situation: User clicks on a map-image google maps API V3 is loaded via ajax the map is shown in a dialog window / lightbox What

Solution 1:

Thanks to Alphonso for pointing me in the correct direction.

The problem is in the dimensions of the map div, even though #map_canvas had a height and width applied via css in the top of the document, it would seem the google maps API initializing before the style was being applied (this theory could be tested with dynatrace).

*Easy solution:

1) inline styles for width and height*

<div id="map_canvas" style="width: 700px; height: 400px"></div>

2) delay the loading of the map with setTimeout()

Solution 2:

I think that the problem is that the map initializes before the resizing animation has finished and so it thinks that it's smaller.

Try to make it adjust its size after the loading effect has finished:

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

(you'll have to keep a reference to the "map" object