Google Maps Draw Polygon Get Coordinates

In this blog post, you will learn google maps draw polygon get coordinates with an example, and later you can save the latitude/longitude in the database. As you know we can draw various shapes to your map and there are the following shapes available like lines, polygons, circles, and rectangles.

Keep reading on Check if point inside polygon Google Maps JavaScript

Google Maps API Draw Polygon Example

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.

The following example will demonstrate to you that draw a polygon on Google Maps. Find the code snippet below:-

index.html

<html>
<head>
    <title>Google Maps Draw Polygon Get Coordinates</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>Google Maps Draw Polygon Get Coordinates - Demo</h2>
    <div id="map-canvas" style="height: 400px; width: auto;"></div>
    <h4>Updated Coordinates (X,Y)</h4>
    <div id="info" style="position:absolute; color:red; font-family: Arial; height:200px; font-size: 12px;"></div>
</body>
</html>

Download Source Code

Conclusion

I hope you liked this article on google maps draw polygon get coordinates using javascript. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Google Maps API Draw Polygon Example

Reader Interactions

Leave a Reply Cancel reply