Geek Answers Handbook

Get coordinates from google maps polyline

This is my code

http://jsfiddle.net/6KacA/

everything is working fine. I can draw on the map, but I want to get the coordinates that I have on the map. how can i do this on api v3?

PS Sorry for my English.

+4
source share
2 answers

There is a multi-user event for the drawing manager, watch it for access to the polyline (this will be the first argument provided to the callback function).

Then use polyline.getPath() to access and work with the path using MVCArray methods

An example :

 google.maps.event.addListener(drawingManager, 'polylinecomplete', function(line) { alert(line.getPath().getArray().toString()); });
+9
source

You can get all the coordinates of the polylines with the following function.

 function getPathVariableCode(line){ var codeStr = ' var linePath = [\n'; var pathArr = line.getPath(); for (var i = 0; i < pathArr.length; i++){ codeStr += ' {lat: ' + pathArr.getAt(i).lat() + ', lng: ' + pathArr.getAt(i).lng() + '}' ; if (i !== pathArr.length-1) { codeStr += ',\n'; }; }; codeStr += '\n ];'; //the coordinates path it´s print on the console of the browser console.log (codeStr); console.log(pathArr.length); };

And what do you call a function

  line.addListener('click', function () { getPathVariableCode(line); });

Then you just click on the dot to create the coordinates in the console browser

------------ HERE A FULL CODE ---------

 var map; function initialize() { //Map options var mapOptions = { zoom: 7, center: new google.maps.LatLng(18.075464, -94.012622), mapTypeId: google.maps.MapTypeId.TERRAIN, scaleControl: false, mapTypeControl: false, zoomControl: false, draggable: true, disableDoubleClickZoom: true, keyboardShortcuts: false, } //map canvas map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions ); //coordinates por the polyline var linePath = [ {lat: 18.068652, lng: -94.25055299999997}, {lat: 16.766951, lng: -93.31531000000001} ]; //Polyline Options var line = new google.maps.Polyline({ path: linePath, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.4, strokeWeight: 8, editable: true // if you dont want to see the editable point change it to false }); //call to the path coordinates function line.addListener('click', function () { getPathVariableCode(line); }); //set map line.setMap(map); }; //here we call the initialize function which load the map google.maps.event.addDomListener(window, 'load', initialize); //function to get all the coordinates of the polyline function getPathVariableCode(line){ var codeStr = ' var linePath = [\n'; var pathArr = line.getPath(); for (var i = 0; i < pathArr.length; i++){ codeStr += ' {lat: ' + pathArr.getAt(i).lat() + ', lng: ' + pathArr.getAt(i).lng() + '}' ; if (i !== pathArr.length-1) { codeStr += ',\n'; }; }; codeStr += '\n ];'; //the coordinates path it´s print on the console of the browser console.log (codeStr); console.log(pathArr.length); }; 
 #map_canvas { width: 90%; height: 300px; margin: 0 auto; border: 1px solid grey; border-radius: 5px; box-shadow: 0px 0px 8px #999; color: black; text-align: center; } 
 <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div class="container"> <!-- Push Wrapper --> <div class="mp-pusher" id="mp-pusher"> <!-- /scroller-inner --> <div id="map_canvas"></div> </div> <!-- /pusher --> </div> <!-- /container --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script> </body> </html>
+5
source

More articles:


All Articles