Bruno Bruno - 4 months ago 54
Javascript Question

KML ordering in Google Maps API

I am loading multiple kml layers on a google map. I need the first layer loaded to always stay the first layer, since it has polygons and I won't be able to click on any of the markers on the other layers since the layer with the polygons is on top. I know that the KML layers are added asynchronously, so what can I do to make sure that a certain layer is always the first to load?

Answer

Use the zIndex property of the KmlLayerOptions object

From the documentation

zIndex | Type: number

The z-index of the layer.

proof of concept fiddle

code snippet:

var map;
var polgonLayer;
var ctaLayer;
var markersLayer;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    zIndex: 1,
    preserveViewport: true,
    map: map
  });
  google.maps.event.addListenerOnce(ctaLayer, 'status_changed', function() {
    document.getElementById('info').innerHTML += "ctaLayer: " + ctaLayer.getStatus() + "<br>";
  });
  polygonLayer = new google.maps.KmlLayer({
    url: 'http://www.geocodezip.com/geoxml3_test/kml/simpleUSpoly.kml?uniq=' + (new Date()).getTime(),
    zIndex: 0,
    map: map
  });
  google.maps.event.addListenerOnce(polygonLayer, 'status_changed', function() {
    document.getElementById('info').innerHTML += "polygonLayer: " + polygonLayer.getStatus() + "<br>";
  });
  markersLayer = new google.maps.KmlLayer({
    url: 'http://www.geocodezip.com/geoxml3_test/kml/markersForTest.kml?uniq=' + (new Date()).getTime(),
    preserveViewport: true,
    zIndex: 2,
    map: map
  });
  google.maps.event.addListenerOnce(markersLayer, 'status_changed', function() {
    document.getElementById('info').innerHTML += "markersLayer: " + markersLayer.getStatus() + "<br>";
  });

  setCheckboxClick('marker', markersLayer);
  setCheckboxClick('polygon', polygonLayer);
  setCheckboxClick('cta', ctaLayer);
}

function setCheckboxClick(id, layer) {
  google.maps.event.addDomListener(document.getElementById(id), 'click', function() {
    var chkbox = document.getElementById(id);
    layer.setOptions({
      preserveViewport: true
    })
    if (chkbox.checked) {
      layer.setMap(map);
    } else {
      layer.setMap(null);
    }
  });

}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<label>polygon</label>
<input type="checkbox" checked="checked" id="polygon" />
<label>markers</label>
<input type="checkbox" checked="checked" id="marker" />
<label>cta</label>
<input type="checkbox" checked="checked" id="cta" />

<div id="map_canvas"></div>