2

I have implemented a Google map by using the Google Maps Javascript API v3 Services. When the page loads, the map displays only in the top-left corner of its div container, that is, it displays only in one-forth of the div container, and the remainder is blank.

However, when I press F12 to inspect the code (with Firebug), suddenly the map will display completely.

What's going on here?

Jon Schneider
  • 25,758
  • 23
  • 142
  • 170
Saritha
  • 1,947
  • 5
  • 18
  • 24

3 Answers3

10

It happens often when you init the map and position of map's container changes. Try to call after loading map and all messings up with DOM:

google.maps.event.trigger(map, 'resize');
hsz
  • 148,279
  • 62
  • 259
  • 315
  • Remember to accept your recent questions - you have 4 right now. – hsz Mar 17 '11 at 09:58
  • Can't tell you how long I've been struggling with this problem due to hiding the div before it is fully loaded. Added that one line and it fixed all my problems. Thanks @hsz!!! – Wade Aug 08 '12 at 04:32
1

You want to try the google ajax google loader. google.load("maps","2"). It's working for me because the loader makes the map work even when I'm switch fast between many other maps and do many travel-salesman-meta-heuristic on the map.

Micromega
  • 12,486
  • 7
  • 35
  • 72
0

If hsz's solution doesn't work, it may be because the resize event needs to be triggered later. This code worked for me:

google.maps.event.addListenerOnce(map, 'idle', function () {
    google.maps.event.trigger(map, 'resize');
});

Source: https://stackoverflow.com/a/17060345/12484 (credit: Ian Devlin)

Community
  • 1
  • 1
Jon Schneider
  • 25,758
  • 23
  • 142
  • 170