Menu
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
667
Try to register a listener on the kmlLayer instead of the map. I made some simple tests with listening to the metadata_changed event and it seems to work fine.
google.maps.event.addListener(kmlLayer, "metadata_changed", function() {
console.debug("metadata_changed");
});
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
