CODEWITHSUNDEEP
google-maps
Saritha
Saritha

Reputation: 1997

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 press F12 to inspect the code (with Firebug), suddenly the map will display completely.

What's going on here?

Upvotes: 2

Views: 3214

Answers (3)

Jon Schneider
Jon Schneider

Reputation: 26973

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)

Upvotes: 0

hsz
hsz

Reputation: 152216

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

Upvotes: 10

Cybercartel
Cybercartel

Reputation: 12592

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.

Upvotes: 1

Related Questions