javascript - Map sometimes appears only on upper left corner of its div - Stack Overflow

admin管理员组

文章数量:1183200

I'm using the Google Maps API v3 for javascript. On certain cases I only see the map on the upper left corner. To see, please try going to and then pressing on one of the many lines.

I'm using the Google Maps API v3 for javascript. On certain cases I only see the map on the upper left corner. To see, please try going to http://telofast.com/telofun/#stationRanking and then pressing on one of the many lines.

• javascript
• google-maps-api-3

Share Improve this question Follow edited Oct 9, 2014 at 2:19 hichris123 10.2k1515 gold badges5757 silver badges7070 bronze badges asked Jan 10, 2012 at 12:32 ronmeronme 1,17211 gold badge1111 silver badges1818 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 17

The map works when the browser is resized as the width and height are correctly set and the resize event is raised.

The quickest solution to your problem would be to call the resize method (below) after the javascript which reveals it. Maybe after showDiv('mapDiv'); in showScoresAndCenterOn?

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

To fix this you need to

1. Resize the map

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

2. Recenter the map, where myCenter is your lat, lng point.

   map.setCenter(myCenter);
   

It's a bit of a hack but it works.

I had the same problem which kept me bothering for few days and today I found the solution and it worked!

In my case I used tabs to view different parts of my page. It wasn't jquery ui, I made it. In one tab i placed the map's code. When I clicked on the maps tab it showed me the map but broken one. Finally I figured out the problem and the solution.

To hide my elements I used display:none property any to reveal I used display:block property. When google map tried to get the dimension of the container block it found 0 x 0 because it was hidden. So the map showed as broken.

Then I changed my css for the map tab only to position:absolute;left:-99999px; instead of display:none and used jquery to add a class and remove when necessary with the properties above. Then the code started to work! My map was fixed.

set containar #Div width to 100%.. it's work for me.

Perfect thanks , i turned into the same issue. And indeed when you put display:none this would give problems when trying to view google maps. I removed the display:none and changed it towards a position outside the screen, when clicking a button this position changes towards somewhere in the screen and my map is shown correctly

本文标签： javascriptMap sometimes appears only on upper left corner of its divStack Overflow