Google map loading issue

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 pres开发者_运维问答s F12 to inspect the code (with Firebug), suddenly the map will display completely.

What's going on here?

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

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.

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)