KML Layers rendering order google maps

Question

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.

Answer 1

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

Answer 2

I've got it working here

Add these two parameters to your markers layer:

pane: "floatPane",
preserveViewport: true

So it looks like this:

var ctaLayer2 = new google.maps.KmlLayer({
    url: 'https://sites.google.com/site/gmaptest123/kml/HelloKml6.kml',
    pane: "floatPane",
    preserveViewport: true
});

The default is, I believe, mapPane, which has a lower z-index than floatPane.

Answer 3

There is an interesting method in this link. Here is the actual ordering code:

// BEGIN SEQUENTIAL KML LOADING CODE
// This ensures the layers are drawn in order: cone, warnings, track

// Draw coneLayer
coneLayer.setMap(map);

// Listen for when coneLayer is drawn
var listener1 = google.maps.event.addListener(coneLayer, 'metadata_changed', function() {
  // When it's drawn (metadata changed), clear listener, draw warningsLayer ...
  google.maps.event.clearListeners(coneLayer, 'metadata_changed');
  warningsLayer.setMap(map);

  // .. and listen for when warningsLayer is drawn
  var listener2 = google.maps.event.addListener(warningsLayer, 'metadata_changed', function() {
    // When it's drawn, clear listener, draw trackLayer ...
    google.maps.event.clearListeners(warningsLayer, 'metadata_changed');
    trackLayer.setMap(map);

    // ... and listen for when trackLayer is drawn
    var listener3 = google.maps.event.addListener(trackLayer, 'metadata_changed', function() {
      // When it's drawn, clear listener and blank out the map-loading sign
      google.maps.event.clearListeners(trackLayer, 'metadata_changed');
      $('#loadingIndicator').html("");

    });

  });

});

// END SEQUENTIAL KML LOADING CODE