How to remove all events from a KML layer in Google Maps API V3

Question

I'm making a web application that uses google maps to help with solar deployment. In essence, I'm loading a google map in full screen and overlaying KML layers using this code:

window.solarLayer = new google.maps.KmlLayer({
url: 'somelink'
}); 
window.solarLayer.setMap(window.map);

Another feature of this application is that a user is able to click anywhere in the map, and using the latitude and logitude at the click point, it would return solar data to the user.

This all works fine by using a click event handler as such:

google.maps.event.addListener(map, 'click', function(event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    console.log( latitude + ', ' + longitude );
});

However, the portion of the map that has the KML layer only registers clicks for the layer and does not access the click event I created...

Does anyone know how to disable click events for KML layers? or how to make my event listener supersede that of the KML layer?

I have tried getting the lat and long by using a click event on the KML layer as well as the map but that only yields a static lat long of where that layer is positioned, not where the user actually clicks.

Thanks for any help in advance!

Answer 1

Set the clickable option of the KmlLayer to false.

from the KmlLayerOptions documentation:

clickable| Type: boolean

If true, the layer receives mouse events. Default value is true.

code snippet:

var map;

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
    });
  window.solarLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    clickable: false
  });
  window.solarLayer.setMap(window.map);


  google.maps.event.addListener(map, 'click', function(event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    document.getElementById('coords').innerHTML = event.latLng.toUrlValue(6);
    console.log(latitude + ', ' + longitude);
  });
}
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="coords"></div>
<div id="map_canvas"></div>