Skip to content Skip to sidebar Skip to footer

Why Google Maps Javascript Is Not Showing A Map Right When I Click It Second Time?

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

Solution 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.

Solution 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.

Solution 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>");

Post a Comment for "Why Google Maps Javascript Is Not Showing A Map Right When I Click It Second Time?"