Switching a Map using AJAX tabs - Google Maps API

Question

I'm trying to setup Google Maps using the Google Maps API v3 JS code. I've got multiple tabs that when clicked open up an AJAXed page of content without reloading the original page. Each tabbed content contains a map. Below is an example of how I've got the map setup. Please note, the list element here is just an example, each tab contains many items that are in different places.

<script type="text/javascript">
var locations = new Array();
</script>
<div id="googlemap"><div>Loading..</div></div>
<ul>
    <li>#1 - My Place, Euless, TX
    <script type="text/javascript">
        locations.push(['#1 - My Place','Euless, TX']);
    </script>
    </li>
    <li>#2 - My Other Place, Dallas, TX
    <script type="text/javascript">
        locations.push(['#2 - My Other Place','Dallas, TX']);
    </script>
    </li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#googlemap div').remove();
    if(locations.length>0)
    {
        var map = new google.maps.Map(document.getElementById('googlemap'), {
          zoom: 3,
          center: new google.maps.LatLng(38.065392,-97.382812),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i=0;i<locations.length;i++) {
            var thelocation = locations[i];
            jQuery.ajax({
                dataType: 'jsonp',
                url: 'http://maps.google.com/maps/geo?output=json&amp;oe=utf8&amp;sensor=false&amp;key=BLAHBLAH&amp;q='+thelocation[1],
                cache: false,
                success: function(data){
                    if(data.Status.code==200)
                        {
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(data.Placemark[0].Point.coordinates[1],data.Placemark[0].Point.coordinates[0]),
                                map: map
                            });
                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                return function() {
                                    infowindow.setContent(thelocation[0]);
                                    infowindow.open(map, marker);
                                }
                            })(marker, i));
                        }
                }
            });
        }
    }
});
</script>

I'm currently having a LOT of trouble with destroying the previous map and loading in the new one. When the tabbed content is loaded the map element appears shifted up and to the left. The Google Maps UI still appears in the correct spots, but the map content itself is moved up / left. When dragging the map it moves slightly until a certain point and at that point the visible area gets clipped back to around that same area of view. Can anyone help me that's dealt with loading new maps via AJAX?

Answer 1

You have to create a trigger to tie the DIV size changes to the resize event for the map.

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .