How to get polygon properties when a marker is placed on it

Using google map Drawing Manager user draws the polygon .I want to get polygon properties(title,paths,..) when a marker(marker from drawing manager) is placed on it. Here I want to know how to get the properties of the polygon(title, paths) and then like to 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 fine to show a alert message of the polygon properties When I place the marker on it. Hope There will be possible for this.

jsfiddle

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); } }); });

Recommended topics

Hot tags