Bruno Bruno - 1 year ago 172
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 Source

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: '',
    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: '' + (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: '' + (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);
      preserveViewport: true
    if (chkbox.checked) {
    } else {

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

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