draw polygon and get coordinates

Tags | draw polygon get coordinates, draw polygon coordinates google maps, google maps draw polygon and get coordinates, draw polygon on google maps and get coordinates, draw polygon get coordinates x y

Draw Polygon and Get Coordinates

A polygonal area may include several separate paths (specifies an array of arrays), each array defines a separate sequence of ordered Latitude and Longitude coordinates. The API provides a simple getPath() method for polygons consisting of one path.

Draw Polygon and Get Coordinates JavaScript Example

In this google maps tutorial I will explain how to draw polygon on google maps and get coordinates. Find the source code below :-

<html>
<head>
    <title>Draw polygon on google maps and get coordinates javascript</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Your-Key"></script>
    <script type="text/javascript">
        var draggablePolygon; function InitMap() {
            var location = new google.maps.LatLng(28.620585, 77.228609);
            var mapOptions = {
                zoom: 7,
                center: location,
                mapTypeId: google.maps.MapTypeId.RoadMap
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            var shapeCoordinates = [
                new google.maps.LatLng(28.525416, 79.870605),
                new google.maps.LatLng(27.190518, 77.530518),
                new google.maps.LatLng(29.013807, 77.67334)

            ];

            // Construct the polygon
            draggablePolygon = new google.maps.Polygon({
                paths: shapeCoordinates,
                draggable: true,
                editable: true,
                strokeColor: '',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#ADFF2F',
                fillOpacity: 0.5
            });

            draggablePolygon.setMap(map);

            google.maps.event.addListener(draggablePolygon, "dragend", Getpolygoncoordinates);
            google.maps.event.addListener(draggablePolygon.getPath(), "insert_at", Getpolygoncoordinates);
            google.maps.event.addListener(draggablePolygon.getPath(), "remove_at", Getpolygoncoordinates);
            google.maps.event.addListener(draggablePolygon.getPath(), "set_at", Getpolygoncoordinates);
        }

        function Getpolygoncoordinates() {
            var len = draggablePolygon.getPath().getLength();
            var strArray = "";
            for (var i = 0; i < len; i++) {
                strArray += draggablePolygon.getPath().getAt(i).toUrlValue(5) + "<br>";
            }

            document.getElementById('info').innerHTML = strArray;
        }
    </script>
</head>
<body onload="InitMap();Getpolygoncoordinates();">
    <h2>Get Polygon Coordinates Path Array  </h2>
    <table>
        <tr>
            <td style="width:800px">
                <div id="map-canvas" style="height: 400px; width: auto;"></div>
            </td>
            <td></td>
            <td style="width:200px">
                <h3>Coordinates X Y</h3>
                <div id="info" style="position:absolute; color:red; font-family: Verdana; font-size: 14px;"></div>
            </td>
        </tr>
    </table>
</body>
</html>

Download Source Code

Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

LEAVE A REPLY

Please enter your comment!
Please enter your name here