Google Maps Draw Polygon Get Coordinates


Google Maps Draw Polygon Get Coordinates

Google Maps API has several types of overlays that you can add programmatically. Even you can drawing on the map for example draw lines on the map using poly-lines, draw areas of arbitrary shape on the map using polygons, rectangle, draw circle and symbols etc.

Google Maps API v3 Edit Polygon

The following example shows an implementation of drawing polygon on the map and finding coordinates of a draggrable polygon in Google Maps JavaScript API v3. And after getting the coordinate for polygon, save latitude and longitude into an array. Find the code below for polygon drawing and getting coordinates with Google Map API v3 :- 
google map polygon drawing tool,google maps polygon click event,google maps api v3 polygon click event,google maps multiple polygons,draw polygon on google map android
Draggable Resizing Polygon - Google Maps
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <title>Get Latitude and Longitude Coordinates of a Polygon - Google Maps API v3</title>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        var bermudaTriangle;
        function initialize() {
            var myLatLng = new google.maps.LatLng(28.991625, 77.706587);
            var mapOptions = {
                zoom: 6,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.RoadMap

            var map = new google.maps.Map(document.getElementById('map-canvas'),
            var triangleCoords = [
            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 
            bermudaTriangle = new google.maps.Polygon({
                paths: triangleCoords,
                draggable: true,
                editable: true,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35

            google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);
            google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);
            google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);
            google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);

        function getPolygonCoords() {
            var len = bermudaTriangle.getPath().getLength();
            var htmlStr = "";
            for (var i = 0; i < len; i++) {
                htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>";
            document.getElementById('info').innerHTML = htmlStr;

<body onload="initialize()">
    <div id="map-canvas" style="height: 350px; width: auto;">
    <div id="info" style="position: absolute; font-family: Arial; font-size: 14px;">
I hope you will enjoy the development tips while programming with Google Maps JavaScript API v3. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome. 

Also If you like this article, don't forget to share this article with your friends and colleagues.
Google Maps Draw Polygon Get Coordinates Reviewed by Ravi Kumar on 5:20 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form


Email *

Message *

Powered by Blogger.