[JavaScript] How to check if Google Maps is fully loaded ?

Question

I've embedding Google Maps on my web site. Once Google Maps is loaded, I need to kick off a few JavaScript processes.

Is there a way to auto-detect when Google Maps has fully loaded ... including tile downloads and all?

A tilesloaded() method exists that is suppose to accomplish exactly this task but it does not work.

Thanks in advance for any help

Answer 1

GMap2::tilesloaded() would be the event you're looking for.

See: http://code.google.com/apis/maps/documentation/reference.html#GMap2.tilesloaded

for references.

Answer 2

If you're using the Maps API v3, this has changed.

In version 3, you essentially want to set up a listener for the 'bounds_changed' event, which will trigger upon map load. Once that has triggered, remove the listener as you don't want to be informed every time the viewport bounds change.

This may change in the future as the V3 API is evolving :-)

Answer 3

You could check the GMap2.isLoaded() method every n milliseconds to see if the map and all its tiles were loaded (window.setTimeout() or window.setInterval() are your friends).

While this won't give you the exact event of the load completion, it should be good enough to trigger your javascripts.

Answer 4

Where the variable map is an object of type GMap2:

    GEvent.addListener(map, "tilesloaded", function() {
      console.log("Map is fully loaded");
    });