How to get polygon properties when a marker is placed on it
Using google map A Drawing Manager user draws a polygon. I want to get polygon properties (name, paths, ..) when a marker is placed on it (marker from paint manager). Here I want to know how to get the properties of a polygon (title, paths) and then like it in a variable.
code:
<html>
<head>
<title>Get Latitude and Longitude Coordinates of a Polygon - Google Maps API v3</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.17&libraries=drawing&sensor=true"></script>
<script type="text/javascript" src="gmaps.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function() {
var mapHeight = '400px';
$('#map-canvas').css('height', mapHeight);
mymap = new GMaps({
div: '#map-canvas',
lat: 47.53187912201915,
lng: 7.705222390807307,
zoom: 20,
zoomControl: true,
mapTypeId: 'satellite'
});
map = mymap.map;
map_drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.POLYGON
]
},
//drawingMode: google.maps.drawing.OverlayType.POLYGON,
markerOptions: {
draggable: true,
},
polylineOptions: {
editable: true
},
map: map
});
});
</script>
</head>
<body>
<div id="map-canvas" style="height: 350px; width: auto;">
</div>
<div id="info" style="position: absolute; font-family: Arial; font-size: 14px;">
</div>
</body>
</html>
It would be nice to show a warning message about polygon properties when I place a marker on it. Hope It will be possible there.
source to share
You need to declare an array containing all the polygons that the user draws, and then when the user adds a marker, you will need to iterate over your polygon until you find the one that contains the marker. This is done by adding listeners to polygonal Drawingmanager objects and tagged events.
var polygonArray=[];
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
polygonArray.push(polygon);
});
google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
polygonArray.forEach(function(polygon) {
if(google.maps.geometry.poly.containsLocation(marker.getPosition(), polygon)) {
console.log('Marker added inside polygon',polygon);
}
});
});
Edit: I was missing the closing parenthesis after containsLocation
See how it works: http://jsfiddle.net/amenadiel/zfvyou0b/
source to share