Search code examples
javascriptgoogle-mapskmljak

KML Layers rendering order google maps

I have noticed some different behavior with the following APIS

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

http://jsfiddle.net/x8dSP/2062/

Sometimes the polygon layer renders ontop of the balloon layer, and sometimes the opposite.

It seems like after the map is "cached?" in the browser it will render with the polygon layer ontop. Is there anyway to prevent this? Or to have one layer always be in the background? Unfortunately I cannot map these layers in one kml.

Solution

  • The layers get rendered in the order they are received from the server (which is not necessarily the order in which they appear in the code). You can force one to load after the other by waiting for the KmlLayer status_changed event before setting the map property of the second.

    function initialize() {
  var chicago = new google.maps.LatLng(-122.365662,37.826988);
  var mapOptions = {
    zoom: 11,
    center: chicago
  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'https://sites.google.com/site/gmaptest123/kml/nst.kml'
  });
  google.maps.event.addListener(ctaLayer, "status_changed", function() {
    ctaLayer2.setMap(map);
  });
  ctaLayer.setMap(map);

  var ctaLayer2 = new google.maps.KmlLayer({
    url: 'https://sites.google.com/site/gmaptest123/kml/HelloKml6.kml'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

    updated fiddle