为什么谷歌地图JavaScript第二次点击时没有正确显示地图？

Question

I am using Google Maps JavaScript API v3 for showing locations on the map in my web application. In my html I have:

<script src="jquery-mainpage.js"></script>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB4LCwxrO5EzHnAQXCkP9fjREUEhOPCol4&sensor=false">
</script>

And this is how I am making a map when update button is clicked in jquery-mainpage.js :

$('#updatebtn').unbind("click");
$('#updatebtn').bind('click', function(){
    var keystring = $('#key').text();
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8888/jsgooglemaps',
        data: {keystr: keystring},
        success: function(result) {
            var obj = jQuery.parseJSON(result);
            var centerLatLng = new google.maps.LatLng(obj.centerLat, 
                obj.centerLong);
            var myOptions = {
                center: centerLatLng,
                zoom: 17,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                draggable: true
            };

            var map = new google.maps.Map(
                document.getElementById("map_canvas_1"),
                myOptions);

            var markerArray = obj.locations;
            for(var i=0;i<markerArray.length;i++){
                var myLatlng = new google.maps.LatLng(
                    markerArray[i].latitude, 
                    markerArray[i].longitude);
                var marker = new google.maps.Marker({
                    clickable: true,
                    position: myLatlng,
                    map: map,
                    zIndex: i
                });
                google.maps.event.addListener(marker, "click", function() {
                    var tempLatLng = new google.maps.LatLng(0, 0);
                    this.setVisible(false); 
                    this.setPosition(tempLatLng);
                    var j = this.getZIndex();
                    markerArray[j].latitude = 0;
                    markerArray[j].longitude = 0;
                });
            }
        }
    });
});

On first click it shows everything right. but when i click update button again then it doesn't show map right. I am attaching both screen shots. Can anybody tell me why is it happening. Thanks in advance. Map on first click

Map when i click update button again

Answer 1

You don't want to repeatedly create a new instance of the map, because there is a known bug that prevents the memory from previous map instances from being garbage collected. Check out this question and the discussion and resulting answers: What is the Proper Way to Destroy a Map Instance?

In the answer to that question, there is a link to a video presented during a Google Maps Office Hours session by Chris Broadfoot and Luke Mahe from the Google Maps team that explains they do not support use cases that involve repeated creation of map instances. You will be much better off keeping a single instance of the map and reusing the same map throughout your user's session.

Answer 2

I am creating map_convas_1 div from the ajax success code and removing it when updating is done. and then creating it again whenever user clicks update button. Its working fine.

Answer 3

It works. Thank you very much, your "remove code from div" option works for me, my problem was that second time it doesn't work, if I'm resizing the screen it works but not is a natural way that user resize the screen to see the map.

I'm using Jquery to remove div code. In my case I was using the jquery dialog, then when I close the dialog I'm replacing the html from the div (where google maps is showing the map) with the original div code.

My original div code was

<div id="mapaLocalsub" style="width:500px; height:450px; " ></div>

I notice that after google maps was working it fills the div with a lot of things and style, then in the close function from my Jquery.dialog I'm replacing the html with my original div code:

$( "#mapaLocal" ).dialog({
      height: 450,
      width: 500,
      modal: true,
      close: function() {
      $( "#mapaLocal" ).html("<div id=\"mapaLocalsub\" style=\"width:500px;     height:450px; \" ></div>");
      }
});

But of course, you can use the Jquery html method in a function that you call when close the function or before creating your map, hope it helps.

$( "#mapaLocal" ).html("<div id=\"mapaLocalsub\" style=\"width:500px;     height:450px; \" ></div>");