| 1 | <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
|
|---|
| 2 | <html>
|
|---|
| 3 | <head>
|
|---|
| 4 | <title>Get Latitude and Longitude Coordinates of a Polygon Google Maps API v3</title>
|
|---|
| 5 | <script type=text/javascript src=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false></script>
|
|---|
| 6 | <script type=text/javascript>
|
|---|
| 7 | var bermudaTriangle;
|
|---|
| 8 | function initialize() {
|
|---|
| 9 | var myLatLng = new google.maps.LatLng(18.353135, 73.850097);
|
|---|
| 10 | var mapOptions = {
|
|---|
| 11 | zoom: 7,
|
|---|
| 12 | center: myLatLng,
|
|---|
| 13 | mapTypeId: google.maps.MapTypeId.RoadMap
|
|---|
| 14 | };
|
|---|
| 15 |
|
|---|
| 16 | var map = new google.maps.Map(document.getElementById(map-canvas),
|
|---|
| 17 | mapOptions);
|
|---|
| 18 | var triangleCoords = [
|
|---|
| 19 |
|
|---|
| 20 | new google.maps.LatLng(18.988116, 75.60791),
|
|---|
| 21 | new google.maps.LatLng(16.279608, 75.997925),
|
|---|
| 22 | new google.maps.LatLng(17.008859, 73.24585)
|
|---|
| 23 |
|
|---|
| 24 | ];
|
|---|
| 25 |
|
|---|
| 26 | // Construct the polygon
|
|---|
| 27 | bermudaTriangle = new google.maps.Polygon({
|
|---|
| 28 | paths: triangleCoords,
|
|---|
| 29 | draggable: true,
|
|---|
| 30 | editable: true,
|
|---|
| 31 | strokeColor: #FF0000,
|
|---|
| 32 | strokeOpacity: 0.8,
|
|---|
| 33 | strokeWeight: 2,
|
|---|
| 34 | fillColor: #FF0000,
|
|---|
| 35 | fillOpacity: 0.35
|
|---|
| 36 | });
|
|---|
| 37 |
|
|---|
| 38 | bermudaTriangle.setMap(map);
|
|---|
| 39 | google.maps.event.addListener(bermudaTriangle, dragend, getPolygonCoords);
|
|---|
| 40 | google.maps.event.addListener(bermudaTriangle.getPath(), insert_at, getPolygonCoords);
|
|---|
| 41 | google.maps.event.addListener(bermudaTriangle.getPath(), remove_at, getPolygonCoords);
|
|---|
| 42 | google.maps.event.addListener(bermudaTriangle.getPath(), set_at, getPolygonCoords);
|
|---|
| 43 | }
|
|---|
| 44 |
|
|---|
| 45 | function getPolygonCoords() {
|
|---|
| 46 | var len = bermudaTriangle.getPath().getLength();
|
|---|
| 47 | var htmlStr = ;
|
|---|
| 48 | for (var i = 0; i < len; i++) {
|
|---|
| 49 | htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(6) + <br>;
|
|---|
| 50 | }
|
|---|
| 51 | document.getElementById(info).innerHTML = htmlStr;
|
|---|
| 52 | }
|
|---|
| 53 | </script>
|
|---|
| 54 | </head>
|
|---|
| 55 | <body onload=initialize()>
|
|---|
| 56 | <div><h2>Please drag and resize the polygon to select desired area </h2></div>
|
|---|
| 57 | <div id=map-canvas style=height: 600px; width: auto;>
|
|---|
| 58 | </div>
|
|---|
| 59 | <div>Selected Polugon Co-ordinates are as below </div>
|
|---|
| 60 | <div id=info style=position: absolute; font-family: Arial; font-size: 14px;>
|
|---|
| 61 | </div>
|
|---|
| 62 | </body>
|
|---|
| 63 | </html> |
|---|
