A map sometimes only appears in the upper left corner of its div

Question

I am using the Google Maps API v3 for javascript . In some cases, I see only a map in the upper left corner. To see, please go to http://telofast.com/telofun/#stationRanking , and then click on one of the many lines.

Answer 1

The map works when the browser size changes, since the width and height are set correctly, and the resize event increases.

The quickest solution to your problem is to call the resize method (below) after javascript that shows it. Maybe after showDiv('mapDiv'); in showScoresAndCenterOn ?

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

Answer 2

To fix this, you need to

• Change map size

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

• Move the map where myCenter is your lat, lng point.

   map.setCenter(myCenter); 

It's a little hack, but it works.

Answer 3

I had the same problem that made me worry for several days, and today I found a solution, and it worked!

In my case, I used tabs to view different parts of my page. It was not jquery ui, I did it. On one tab, I placed the card code. When I clicked on the map tab, he showed me the map, but broke it. Finally, I understood the problem and solution.

To hide my elements, I used the display:none property to show that I used the display:block property. When the google map tried to get the container block size, it found 0 x 0 because it was hidden. Thus, the card proved to be broken.

Then I changed my css to bookmark the map only to position:absolute;left:-99999px; instead of display:none and used jquery to add a class and remove it if necessary using the properties above. Then the code started working! My map has been fixed.

Answer 4

set containsar #Div width to 100% .. this works for me.

Answer 5

Great thanks, I went into the same problem. And indeed, when you place the display: none of them will give problems when trying to view Google maps. I deleted the display: no, and changed it to a position off the screen, when I click the button, this position changes to the side somewhere on the screen, and my map is displayed correctly.