Created
December 4, 2015 10:42
-
-
Save perminder-klair/12412b3fee59ae0e3805 to your computer and use it in GitHub Desktop.
Create google maps polygen
This file contains 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 charset="utf-8"> | |
<title>Draggable Polygons</title> | |
<style> | |
html, body { | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
#map { | |
height: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script> | |
// This example creates draggable triangles on the map. | |
// Note also that the red triangle is geodesic, so its shape changes | |
// as you drag it north or south. | |
function initMap() { | |
var map = new google.maps.Map(document.getElementById('map'), { | |
zoom: 6, | |
center: {lat: 52.5616265, lng: -2.0823763}, | |
mapTypeId: google.maps.MapTypeId.TERRAIN | |
}); | |
var redCoords = [ | |
{lat: 52.5616265, lng: -2.0823763}, | |
{lat: 55.5616265, lng: -3.0823763}, | |
{lat: 57.5616265, lng: -5.1823763} | |
]; | |
// Construct a draggable red triangle with geodesic set to true. | |
//https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polygon | |
var polygen = new google.maps.Polygon({ | |
map: map, | |
paths: redCoords, | |
strokeColor: '#FF0000', | |
strokeOpacity: 0.8, | |
strokeWeight: 2, | |
fillColor: '#FF0000', | |
fillOpacity: 0.35, | |
editable: true, | |
draggable: true, | |
geodesic: true | |
}); | |
google.maps.event.addListener(polygen, "dragend", getPolygonCoords); | |
google.maps.event.addListener(polygen.getPath(), "insert_at", getPolygonCoords); | |
google.maps.event.addListener(polygen.getPath(), "remove_at", getPolygonCoords); | |
google.maps.event.addListener(polygen.getPath(), "set_at", getPolygonCoords); | |
function getPolygonCoords() { | |
var len = polygen.getPath().getLength(); | |
var htmlStr = ""; | |
for (var i = 0; i < len; i++) { | |
htmlStr += polygen.getPath().getAt(i).toUrlValue(5); | |
} | |
console.log(htmlStr); | |
} | |
} | |
</script> | |
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAUoOPglpaLI-bovruetzYE0XflyJmcHEo&callback=initMap&signed_in=true" async defer> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment