Google Map does not center even after resize

Question

OK, so I have a Jquery Dialog and within a Google Maps v3 canvas. The dialog is opened when clicked on a link and the map is centered to the Marker which is associated with the link. Now, all works fine the FIRST time. the map is shown and centered to the marker's position. When I close the dialog, and click on another link. The map is show but the marker is just outside the map area, the well known top left corner. I need to drag the map a bit to make the marker appear. OK, so I have added multiple resizes and setCenter's in the code but it still does not work.

What is going wrong???

Here's the code var map;

        $(document).ready(function() {

            $("#map_container").dialog({
                autoOpen : false,
                resizable : false,
                resizeStop : function(event, ui) {
                    google.maps.event.trigger(map, 'resize')
                },
                open : function(event, ui) {
                    google.maps.event.trigger(map, 'resize');
                },
                close : function(event, ui) {
                    map = null;
                }
            });

            $(".show_on_map").click(function(e) {

                alert("click");

                var lat = $(this).attr('lat');
                var lng = $(this).attr('lng');
                var placeName = $(this).attr('placeName');
                var placeAddress = $(this).attr('placeAddress');

                initialize(lat, lng);
                plotPoint(lat, lng, placeName, '<span class="gBubble"><b>' + placeName + '</b><br>' + placeAddress + '</span>');

                $("#map_container").dialog("open");

            });

        function plotPoint(srcLat, srcLon, title, popUpContent, markerIcon) {
            var myLatlng = new google.maps.LatLng(srcLat, srcLon);
            var marker = new google.maps.Marker({
                position : myLatlng,
                map : map,
                title : title,
                icon : markerIcon
            });
            var infowindow = new google.maps.InfoWindow({
                content : popUpContent
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });

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

            map.setCenter(myLatlng);

        }

        function initialize(lat, lng) {

            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom : 13,
                center : latlng,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            google.maps.event.trigger(map, 'resize');

            map.setCenter(latlng);
        }
</script>

Here's the DIV.

<div id="map_container" style="width:300px;height:300px;">
        <div id="map_canvas" style="width:250px;height:250px;"></div>
    </div>

Any help is greatly appreciated. Coen

Answer 1

You can try this sample code:

lastCenter=map.getCenter(); 
google.maps.event.trigger(map_canvas, 'resize');
map.setCenter(lastCenter);