Map sometimes appears only on upper left corner of its div

Question

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.

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

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