root/gs3-extensions/map-editor/DrawingManager/EXTRA/example 2.html @ 32709

Revision 32709, 2.0 KB (checked in by ak19, 9 months ago)

Jump-start to the map-editor extension, which takes account of the 21 previous check-point versions.

Line 
1<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
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&gt;
6<script type=”text/javascript”>
7var bermudaTriangle;
8function initialize() {
9var myLatLng = new google.maps.LatLng(18.353135, 73.850097);
10var mapOptions = {
11zoom: 7,
12center: myLatLng,
13mapTypeId: google.maps.MapTypeId.RoadMap
14};
15
16var map = new google.maps.Map(document.getElementById(‘map-canvas’),
17mapOptions);
18var triangleCoords = [
19
20new google.maps.LatLng(18.988116, 75.60791),
21new google.maps.LatLng(16.279608, 75.997925),
22new google.maps.LatLng(17.008859, 73.24585)
23
24];
25
26// Construct the polygon
27bermudaTriangle = new google.maps.Polygon({
28paths: triangleCoords,
29draggable: true,
30editable: true,
31strokeColor: ‘#FF0000’,
32strokeOpacity: 0.8,
33strokeWeight: 2,
34fillColor: ‘#FF0000’,
35fillOpacity: 0.35
36});
37
38bermudaTriangle.setMap(map);
39google.maps.event.addListener(bermudaTriangle, “dragend”, getPolygonCoords);
40google.maps.event.addListener(bermudaTriangle.getPath(), “insert_at”, getPolygonCoords);
41google.maps.event.addListener(bermudaTriangle.getPath(), “remove_at”, getPolygonCoords);
42google.maps.event.addListener(bermudaTriangle.getPath(), “set_at”, getPolygonCoords);
43}
44
45function getPolygonCoords() {
46var len = bermudaTriangle.getPath().getLength();
47var htmlStr = “”;
48for (var i = 0; i < len; i++) {
49htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(6) + “<br>”;
50}
51document.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>
Note: See TracBrowser for help on using the browser.