Menu
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
239
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>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
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
