0

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 clickenter image description here

Map when i click update button againenter image description here

Nick Johnson
  • 100,655
  • 16
  • 128
  • 198
Piscean
  • 3,069
  • 12
  • 47
  • 96
  • Do you realy need to initialize the map every time you click the button? – Salman May 23 '12 at 08:27
  • i am updating locations. Should i initialize the map only once and then just put markers on it. Is this what you mean? A user can have different locations. how can i initialize the map when its center point will be changed everytime? – Piscean May 23 '12 at 08:32
  • 1
    Yes. Initializing the map again and again would be redundant. In case you need to remove previously added markers after an update, you can use this method `marker.setMap(null)`. I also notice you added `draggable: true`. So you probably also need to check if there is any CSS code that is causing the problem. – Salman May 23 '12 at 08:36
  • if i initialize map once in the starting of document. then even at first click it doesn't show right map :( – Piscean May 23 '12 at 09:14
  • Is the application live somewhere? – Salman May 23 '12 at 09:21
  • yeah but this functionality is not there yet. It will be in the next update and that what i am trying to do. www.runno.me is the link to the application – Piscean May 23 '12 at 09:39
  • 1
    Okay, try declaring `map` variable at the very beginning of your script, like `var map;`. And lose 'var map = new google.maps.Map(...' from the ajax success code, just use `map = new google.maps.Map(...`. – Salman May 23 '12 at 09:52
  • tried it before but it didn't work. Just added an answer. Its working fine now. Thanks for your time – Piscean May 23 '12 at 09:57

3 Answers3

2

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.

Community
  • 1
  • 1
Sean Mickey
  • 7,618
  • 2
  • 32
  • 58
0

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.

Piscean
  • 3,069
  • 12
  • 47
  • 96
0

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>");
Axel Osorio
  • 39
  • 2