Menu
I'm trying to develop an application by using Google Maps API v3. What I'm trying to do is; first let the user draw a polygon on a Google Map and get his/her polygon's coordinates and save them into a database. I will then show the user saved coordinates.
I don't know how to let users draw polygon on a Google Map with API v3 and then get the coordinates. If I can get those coordinates, it's easy to save them into a database.
http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html is nearly the exact example but it uses API v2 and doesn't give coordinates. I want to use API v3 and be able to get all coordinates.
Is there any examples of drawing polygon and getting its coordinates with API v3?
358
In Google Earth, create the polygon that you wish to bring into RockWorks. Or, locate the polygon that currently exists in your Saved Places listing. Right-click on the item, and choose Copy from the pop-up menu. Or, right-click on the item, and choose Save Place As to save the locations in a KMZ file.
If all you need is the coordinates here is a drawing tool I like to use - move the polygon or re-shape it and the coordinates will display right below the map: jsFiddle here.
Also, here is a Codepen
JS
var bermudaTriangle; function initialize() { var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654); var mapOptions = { zoom: 12, center: myLatLng, mapTypeId: google.maps.MapTypeId.RoadMap }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var triangleCoords = [ new google.maps.LatLng(33.5362475, -111.9267386), new google.maps.LatLng(33.5104882, -111.9627875), new google.maps.LatLng(33.5004686, -111.9027061) ]; // Construct the polygon bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, draggable: true, editable: true, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }); bermudaTriangle.setMap(map); google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords); google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords); google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords); google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords); } function getPolygonCoords() { var len = bermudaTriangle.getPath().getLength(); var htmlStr = ""; for (var i = 0; i < len; i++) { htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>"; } document.getElementById('info').innerHTML = htmlStr; } HTML
<body onload="initialize()"> <h3>Drag or re-shape for coordinates to display below</h3> <div id="map-canvas"> </div> <div id="info"> </div> </body> CSS
#map-canvas { width: auto; height: 350px; } #info { position: absolute; font-family: arial, sans-serif; font-size: 18px; font-weight: bold; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
