Can't click on KML Layer inside a polygon

Question

My problem is kind of simple, but I can't find how to fix it.

I'm using AngularJS with Angular Google Maps (https://github.com/angular-ui/angular-google-maps)

I have a simple map, with just a polygon and a KML layer, which displays a single marker inside the polygon.

But I don't know why, I can't click on the marker. I put two different KML layers on the map, so you can see that the one outside the polygon is clickable while the second one, inside, is not.

You can see the code below :

'use strict';
angular.module("map", ['uiGmapgoogle-maps'])

.controller("MapController",['$scope', '$http', function ($scope, $http) {
 $scope.map = {
  center: {
   latitude: 48.80913908755741,
   longitude: 3.0915678394317014
  },
  zoom: 12,
  bounds: {}
 };

 $scope.polygons = [{
  id: 1,
  path: [
   { latitude: 48.825218, longitude: 3.050508 },
   { latitude: 48.823409, longitude: 3.101664 },
   { latitude: 48.792885, longitude: 3.111105 },
   { latitude: 48.793224, longitude: 3.060465 }
  ],
  stroke: {
   color: '#584885',
   weight: 2
  },
  editable: false,
  draggable: false,
  geodesic: false,
  visible: true,
  clickable: false,
  zindex: -1,
  fill: {
   color: '#E6E6E6',
   opacity: 0.6
  }
 }];

 $scope.kmlLayerOptions1 = {
  url: "http://nanakii.fr/up/ligne_bus.kml",
  preserveViewport: true
 };
 $scope.kmlLayerOptions2 = {
  url: "http://nanakii.fr/up/ligne_bus2.kml",
  preserveViewport: true
 };
 $scope.showKml = true;
}]);

* { margin: 0; padding: 0;}

body, html { height:100%; }

.angular-google-map-container  {
    position:absolute;
    width:100%;
    height:100%;
}

<html ng-app="map">

<head>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <script src="http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps_dev_mapped.js"></script>
 <script src="//maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places&sensor=false&language=en&v=3.17"></script>
</head>

<body ng-controller="MapController">
 <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
  <ui-gmap-polygon static="true" ng-repeat="p in polygons track by p.id" path="p.path" stroke="p.stroke" visible="p.visible" geodesic="p.geodesic" fill="p.fill" fit="false" editable="p.editable" draggable="p.draggable">
  </ui-gmap-polygon>
  <ui-gmap-layer type="KmlLayer" options="kmlLayerOptions1" show="showKml"></ui-gmap-layer>
  <ui-gmap-layer type="KmlLayer" options="kmlLayerOptions2" show="showKml"></ui-gmap-layer>
  <ui-gmap-marker coords="marker.coords" options="marker.options" idkey="marker.id"></ui-gmap-marker>
    </ui-gmap-google-map>
</body>
</html>

I've tried many options, with no results. I found an old question here with the same problem but the answer didn't solve it. (Can't click point from KML if inside Polygon)

Any help would be great ! Thanks !

Edit :

I've also tried without Angular, so the problem comes directly from Google Maps. You can click on the bus line outside the polygon, but not inside.

You can test the code here (the snippet was not working correctly) : http://nanakii.fr/dev/test/gmap.php

Dr.Molle · Accepted Answer · 2015-03-06T11:14:30.420

You've forgotten to set the clickable-param for the directive(the demo also didn't set the clickable-property):

<ui-gmap-polygon clickable="p.clickable" >

'use strict';


angular.module("map", ['uiGmapgoogle-maps'])

.controller("MapController", ['$scope', '$http',
  function($scope, $http) {
    $scope.map = {
      center: {
        latitude: 48.80913908755741,
        longitude: 3.0915678394317014
      },
      zoom: 12,
      bounds: {}
    };

    $scope.polygons = [{
      id: 1,
      clickable: false,
      path: [{
        latitude: 48.825218,
        longitude: 3.050508
      }, {
        latitude: 48.823409,
        longitude: 3.101664
      }, {
        latitude: 48.792885,
        longitude: 3.111105
      }, {
        latitude: 48.793224,
        longitude: 3.060465
      }],
      stroke: {
        color: '#584885',
        weight: 2
      },
      editable: true,
      draggable: false,
      geodesic: false,
      visible: true,

      zindex: -1,
      fill: {
        color: '#E6E6E6',
        opacity: 0.6
      }
    }];

    $scope.kmlLayerOptions1 = {
      url: "http://nanakii.fr/up/ligne_bus.kml",
      preserveViewport: true
    };
    $scope.kmlLayerOptions2 = {
      url: "http://nanakii.fr/up/ligne_bus2.kml",
      preserveViewport: true
    };
    $scope.showKml = true;
  }
]);

* {
  margin: 0;
  padding: 0;
}
body,
html {
  height: 100%;
}
.angular-google-map-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

<script>
  // only for the code-snippet
  document.getElementsByTagName('html')[0].setAttribute('ng-app', 'map')
  document.getElementsByTagName('body')[0].setAttribute('ng-controller', 'MapController')
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places&sensor=false&language=en&v=3.17"></script>


<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
  <ui-gmap-polygon static="true" ng-repeat="p in polygons track by p.id" path="p.path" clickable="p.clickable" stroke="p.stroke" visible="p.visible" geodesic="p.geodesic" fill="p.fill" fit="false" editable="p.editable" draggable="p.draggable">
  </ui-gmap-polygon>
  <ui-gmap-layer type="KmlLayer" options="kmlLayerOptions1" show="showKml"></ui-gmap-layer>
  <ui-gmap-layer type="KmlLayer" options="kmlLayerOptions2" show="showKml"></ui-gmap-layer>
  <ui-gmap-marker coords="marker.coords" options="marker.options" idkey="marker.id"></ui-gmap-marker>
</ui-gmap-google-map>

Wow, indeed, how did I miss that... Thanks ! There's still one problem, is it possible to place the KML Layer above the polygon ? I tried the zindex option but it's not working as I want... — Aly, Mar 06 '15 at 12:41
No, it's not possible, see: http://stackoverflow.com/questions/28837030/googlemaps-api-kml-on-top-of-polygon. zIndex will not have any effect here, because polygons will be rendered in another map-pane(with a higher zIndex than the pane where the KmlLayer will be rendered) — Dr.Molle, Mar 06 '15 at 13:06

score 1 · Answer 2 · answered Mar 06 '15 at 10:53

Could the overlapping polygon be the problem? I think the polygon is getting the click, rather than marker, but in that case "clickable: false" should suffice.

I think there must be another problem, as stated in the gmaps documentation: "All features are displayed on the map in order of their zIndex, with higher values displaying in front of features with lower values. Markers are always displayed in front of line-strings and polygons." and clearly this is not the case.

Try specifiyng zIndex for all elements

Can't click on KML Layer inside a polygon

2 Answers2