Easy Code Stuff: Google Maps Creating Polygon And Retrieving Coordinates

In this article I'm going to explain you about getting the latitude and longitude of a polygon in order to do a google map polygon search. In-order to do that first you should let the user to draw a polygon. Then you should get the latitude and longitude of the corners of the polygon. After getting the latitude and longitude of the area drawn by user, what you have to do is, search it in the database or what ever you want. It's completely up to you.

In this example I'm not telling you guys about the polygon search. I'm just trying to help you in the first step by giving the latitude and longitude array of the drawn area.Following example will help you to develop your own google map.Then you can draw a Polygon area on it.

<html>
<head>
    <title>Google Maps Creating Polygon And Retrieving Coordinates</title>
    <script type="text/javascript" src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
    <style>
        #map-canvas
        {
            width: auto;
            height: 500px;
        }
    </style>
</head>
<body onload="initialize()">
    <div id="map-canvas"></div>
    <div id="result"></div>
    <script type="text/javascript">
        function initialize() {
            var myLatLng = new google.maps.LatLng(6.92814, 79.9124);
            var mapOptions = {
                zoom: 12,
                center: myLatLng
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var triangleCoords = [
                new google.maps.LatLng(6.92814, 79.9124),
                new google.maps.LatLng(6.89746, 79.87636),
                new google.maps.LatLng(6.88553, 79.93644)
            ];

            myPolygon = new google.maps.Polygon({
                paths: triangleCoords,
                draggable: true,
                editable: true,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });

            myPolygon.setMap(map);

            google.maps.event.addListener(myPolygon.getPath(), "insert_at", getPolygonCoords);

            google.maps.event.addListener(myPolygon.getPath(), "set_at", getPolygonCoords);
        }

        function getPolygonCoords() {
            var len = myPolygon.getPath().getLength();
            var htmlStr = "";
            for (var i = 0; i < len; i++) {
                htmlStr += "<p>" + myPolygon.getPath().getAt(i).toUrlValue(5) + "</p>";
            }
            document.getElementById('result').innerHTML = htmlStr;
        }
    </script>
</body>
</html>

Then you can get the coordinates in the selected area. Above example I have draw a triangle so, Ill will get three coordinates. Actually what Google Map returning is the Latitude and Longitude of the corners.

1	myPolygon.getPath().getAt(i).toUrlValue(5);

Above code line returns the Latitude and Longitude of a corner. But if your trying to get a lat-lng object out of it, you cant do it directly. because above methods returns the lat lng as a string. But new google.maps.LatLng(lat,lng) expects two numbers separated with commas. So to do that's follow below lines of codes.

function getPolygonCoords() {
    var len = myPolygon.getPath().getLength();
    points = [];
    for (var i = 0; i < len; i++) {
        var strLatLng = myPolygon.getPath().getAt(i).toUrlValue(5);
        var arrLatLng = strLatLng.split(",");
        var objLatLng = new google.maps.LatLng(Number(zzz[0]), Number(zzz[1]));
        points.push(objLatLng);
    }
}

Hope you found this article useful.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Easy Code Stuff

Mar 18, 2016

Google Maps Creating Polygon And Retrieving Coordinates

No comments:

JWT Token Decode Using Jquery