CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
ronme
ronme

Reputation: 1172

Map sometimes appears only on upper left corner of its div

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.

Upvotes: 12

Views: 10618

Answers (5)

Kalyani Sharavanan
Kalyani Sharavanan

Reputation: 1

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

Upvotes: 0

user2188425
user2188425

Reputation: 1

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

Upvotes: -1

erin
erin

Reputation: 1160

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.

Upvotes: 6

maksbd19
maksbd19

Reputation: 3830

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.

Upvotes: 3

benni_mac_b
benni_mac_b

Reputation: 8887

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');

Upvotes: 17

Related Questions