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/#stationRanki

Solution 1:

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

Solution 2:

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.

Solution 3:

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

Solution 4:

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