Major Google Maps glitch using API V3

Question

edit: this is now solved, see my answer below

---

The situation:

1. User clicks on a map-image
2. google maps API V3 is loaded via ajax
3. the map is shown in a dialog window / lightbox

please see glitch here

What happens:

The map displays and all functionality works however there's a glitch with the top-left 'square' of the map.

I'm stuck!

---

edit: now with code:

<div id="map_canvas"></div>
<script type="text/javascript">
    $(function() {          
            var latlng = new google.maps.LatLng(51.448359,-2.590559);
            var options = {
              zoom: 13,
              center: latlng,
              mapTypeControl: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }; 

            var map = new google.maps.Map(document.getElementById('map_canvas'), options);

            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(51.448359,-2.590559),
              map: map
            });
    })
</script>

Answer 1

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

Answer 2

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()