Created
November 20, 2011 21:26
-
-
Save christophercliff/1380958 to your computer and use it in GitHub Desktop.
google maps polygon editor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
| <title>Google Maps JavaScript API v3 Example: Polygon Arrays</title> | |
| <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> | |
| <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> | |
| <script type="text/javascript"> | |
| var map; | |
| var infoWindow; | |
| function initialize() { | |
| var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875); | |
| var myOptions = { | |
| zoom: 5, | |
| center: myLatLng, | |
| mapTypeId: google.maps.MapTypeId.TERRAIN | |
| }; | |
| var bermudaTriangle; | |
| map = new google.maps.Map(document.getElementById("map_canvas"), | |
| myOptions); | |
| var triangleCoords = [ | |
| new google.maps.LatLng(25.774252, -80.190262), | |
| new google.maps.LatLng(18.466465, -66.118292), | |
| new google.maps.LatLng(32.321384, -64.75737) | |
| ]; | |
| bermudaTriangle = new google.maps.Polygon({ | |
| paths: triangleCoords, | |
| strokeColor: "#FF0000", | |
| strokeOpacity: 0.8, | |
| strokeWeight: 3, | |
| fillColor: "#FF0000", | |
| fillOpacity: 0.35 | |
| }); | |
| google.maps.event.addListener(bermudaTriangle, 'mouseover', function() { | |
| bermudaTriangle.setOptions({ | |
| editable: true | |
| }); | |
| }); | |
| google.maps.event.addListener(bermudaTriangle, 'mouseout', function() { | |
| bermudaTriangle.setOptions({ | |
| editable: false | |
| }); | |
| }); | |
| google.maps.event.addListener(bermudaTriangle.getPath(), 'set_at', function() { | |
| console.log(bermudaTriangle.getPath()); | |
| }); | |
| bermudaTriangle.setMap(map); | |
| // Add a listener for the click event | |
| google.maps.event.addListener(bermudaTriangle, 'click', showArrays); | |
| infowindow = new google.maps.InfoWindow(); | |
| } | |
| function showArrays(event) { | |
| // Since this Polygon only has one path, we can call getPath() | |
| // to return the MVCArray of LatLngs | |
| var vertices = this.getPath(); | |
| var contentString = "<b>Bermuda Triangle Polygon</b><br />"; | |
| contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />"; | |
| // Iterate over the vertices. | |
| for (var i =0; i < vertices.length; i++) { | |
| var xy = vertices.getAt(i); | |
| contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng(); | |
| } | |
| // Replace our Info Window's content and position | |
| infowindow.setContent(contentString); | |
| infowindow.setPosition(event.latLng); | |
| infowindow.open(map); | |
| } | |
| </script> | |
| </head> | |
| <body onload="initialize()"> | |
| <div id="map_canvas"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
great sir