Google Maps API V3 callbacks (KML loading)

Asked 2011-03-29T19:20:26.487

I'm using Google Maps API v3 to display a map a load some KML and display/hide them with kml.setMap() method.

I need to display a "loading" window while the KML is loading until the map is complete loaded.

I tried to use something like this:

google.maps.event.addListener(map, 'tilesloaded', function() {
    var d = new Date();
    console.log('Loaded: ' + d);
});

google.maps.event.addListener(map, 'bounds_changed', function() {
    var d = new Date();
    console.log('Started: ' + d);
});

But it didn't worked as expected.

The "titlesloaded" event is not fired always, probably because the cached images?

Here is my log:

Started: Tue Mar 29 2011 16:22:03 GMT-0300 (BRT) <-- started loading map
Loaded: Tue Mar 29 2011 16:22:06 GMT-0300 (BRT) <-- done loading map
Started: Tue Mar 29 2011 16:22:30 GMT-0300 (BRT) <-- started plotting the KML
Started: Tue Mar 29 2011 16:22:30 GMT-0300 (BRT) <-- started plotting the KML (again?!)
Loaded: Tue Mar 29 2011 16:22:32 GMT-0300 (BRT) <-- done plotting the KML

And received nothing while hiding/showing the KML again

Edit Report

2 Answers

I suppose you could write your own custom loader for KML. Here is a simple example which simply tests the return value of the KMLMetaData object. You would have to adapt this to work with multiple KML files.

<html>
    <head>
        <script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script>
    var map;
    var cta_layer;
    var loader;
    var loaderId;

    function initialize() {
        loader = document.getElementById("loader");
        var kmlUrl = 'http://code.google.com/apis/kml/documentation/KML_Samples.kml';
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var myOptions = {
            zoom: 4,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        cta_layer = new google.maps.KmlLayer(kmlUrl, {suppressInfoWindows: true,preserveViewport:true});
        cta_layer.setMap(map);
        loaderId = setInterval("kmlLoader()", 10)
    }

    function kmlLoader() {

        if (typeof  cta_layer.getMetadata() == "object") {

            loader.style.display = "none";
            clearInterval(loaderId);
            return true;
        } else {
            return false;
        }
    }

    function show() {
        cta_layer.setMap(map)
    }

    function hide() {
        cta_layer.setMap(null)
    }
        </script>
    </head>
    <body onload="initialize()">
        <div id="loader" style="background: red; color:white;display:block;">
            Loading....
        </div>
        <div id="map_canvas"  style="height: 500px;width: 500px;">
        </div>
        <input type=button onclick="show()" value="Show">
        <input type=button onclick="hide()" value="Hide">
    </body>
</html>

answered 2011-03-29T22:41:34.477

If I look at the current reference (as of nov 18, 2012), you can simply listen to the status_changed event. I can't even find the metadata_changed event anymore.

answered 2013-01-28T16:20:19.330

Google Maps API V3 callbacks (KML loading)

2 Answers

Your Answer