Multiple kml layers overlapping info window

Question

I have 5 kml layers in my google map, but when an infowindow is shown from layer A, and a marker is clicked from layer B, the marker of B will overlap, or sometimes "hides" behind the infowindow from layer A depending on the z-index. If you click on another marker within the same layer, the other infowindow will close. I want only one infowindow opened at a time OR the last clicked infowindow having the highest z-index (meaning, on top).

I have read this and this and this. The first links tells me load the kml layers in another order (not an option for me), the second link I don't understand and the third link is the preferred behavior. I think the third link is actually an implementation of the second link.

I tried the fix given in the third link, I combined it with my own code:

    var map;
    var layers = [];
var infowindow = new google.maps.InfoWindow({});
// create a new info window for the KML (outage) layer and the geo-coded house marker
function addKmlClickHandler(layers) {
    google.maps.event.addListener(layers, "click", function(event) {
        infowindow.close();
        infowindow.setOptions({
            pixelOffset:    event.pixelOffset,
            content:        event.featureData.infoWindowHtml,
            position:       event.latLng
        });
        infowindow.open(map);
    });
}


      var lat = position.coords.latitude;
      var long = position.coords.longitude;
      var myLatLng = new google.maps.LatLng(lat,long);
        var myOptions = {
            zoom: 15,
    keyboardShortcuts : false, 
    mapTypeControl : false, 
    mapMaker : false, 
    overviewMapControl : false, 
    panControl : false, 
    rotateControl : false, 
    scaleControl : false, 
    scrollwheel : false, 
    streetViewControl : false,
    zoomControl : false, 
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    //  alert('Your latitude is '+lat+' and longitude is '+long);



        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        layers [0] = new google.maps.KmlLayer('...', 
      {preserveViewport: true, suppressInfoWindows: false, map: map});
      google.maps.event.addListener(layers, 'click', function(kmlEvent) {
        alert('test');
    });
      layers [1] = new google.maps.KmlLayer('...', 
      {preserveViewport: true, suppressInfoWindows: false, map: map});
    layers [2] = new google.maps.KmlLayer('...', 
      {preserveViewport: true, suppressInfoWindows: false, map: map});
    layers [3] = new google.maps.KmlLayer('...', 
      {preserveViewport: true, suppressInfoWindows: false, map: map});
    layers [4] = new google.maps.KmlLayer('...', 
      {preserveViewport: true, suppressInfoWindows: false, map: map});
        /*var kmlUrl = '';
    var kmlOptions = {
      suppressInfoWindows: true,
      preserveViewport: true,
      map: map
    };

    var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); */
    //alert('kml data geladen?');
          var infowindow = new google.maps.InfoWindow({
          content: 'You are here!',
      });
        var image = '...';
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image,
          title: 'You are here!',
      });
      infowindow.open(map,marker);

    }
 addKmlClickHandler(layers); // this should do the trick
for (var i = 0; i < layers.length; i++) {
        layers[i].setMap(null);
      }
  }

function toggleLayer(i) {
  if (layers[i].getMap() === null) {
    layers[i].setMap(map);
  }
  else {
    layers[i].setMap(null);
  }

}

But this doesn't work. What am I doing wrong? Is it possible to do it easier, like looking for a click event on a kml layer marker and if yes, hide all other infowindows?

    google.maps.event.addListener(layers[0], 'click', function(hideotherinfowindows) {
    ...
});

Unfortunatelly I haven't found anywhere if it is actually possible to hide all infowindows except the clicked one.

Answer 1

1. suppress the automatic infowindows on the KmlLayers.
2. Add your own click listener to open an infowindow on clicks
3. Only create one infowindow, move it between the markers (use that same infowindow for the "you are here" marker).

example

var infoWindow = new google.maps.InfoWindow();

function openIW(KMLevent) {
  infoWindow.close();
  infoWindow.setOptions(
    { 
     content: KMLevent.featureData.infoWindowHtml,
     position: KMLevent.latLng,
     pixelOffset: KMLevent.pixelOffset
    });
  infoWindow.open(map);
}

google.maps.event.addListener(layers[0], "click", openIW);
google.maps.event.addListener(layers[1], "click", openIW);
google.maps.event.addListener(layers[2], "click", openIW);
google.maps.event.addListener(layers[3], "click", openIW);
google.maps.event.addListener(layers[4], "click", openIW);
google.maps.event.addListener(map, "click", function() { infoWindow.close();});

working fiddle