Google Maps API 3 loading icon

Question

Is there a way to have a loading icon while the map is loading markers? I am using google maps API 3 with javascript and cant find much information on this.

Answer 1

This event is now called "status_changed" per the API docs: https://developers.google.com/maps/documentation/javascript/reference#KmlLayer

It can be used like this:

google.maps.event.addListener(kmlLayer, 'status_changed', function () {
    if (kmlLayer.getStatus() == google.maps.KmlLayerStatus.OK) {
        // Success
    }
    else {
        // Failure
    }
});

Answer 2

If you're loading markers using a KmlLayer object, then you can attach a listener to the event metadata_changed which gets fired after the KmlLayer has loaded all the information.

So you can have your custom loading icon display as soon as you initialize your map, then make the call for the markers using new google.maps.KmlLayer(...) . In the listener for metadata_changed you can remove the custom loading icon, or hide it from displaying. So when the KmlLayer finishes loading, then it'll run the code to remove your loading icon.

You can attach listeners by going:

google.maps.event.addListener(kmlLayerObject, 'metadata_changed', function () {
    ...
}

Answer 3

You could also "hide" the map canvas with a loading div and show it after initialization.

Another thing to be aware of is when the map is hidden on init, it may behave strangely that can be fixed by "resizing" the map:

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2