Menu
This my code
http://jsfiddle.net/6KacA/
everything work fine. i can draw on map but i want get coordinates which is i have drawing on map. how can i do it on api v3?
P.S. Sorry for my English.
432
A polyline is a list of points, where line segments are drawn between consecutive points. The app detects long clicks on map and adds a marker. Lines can be drawn between markers using polylines.
Right-click on the map at your starting point and choose the Measure distance option. Add points around the location's boundary. Once you close the shape by clicking on the starting point, the Google Maps area calculator will automatically process the area of your shape.
Polyline encoding is a lossy compression algorithm that allows you to store a series of coordinates as a single string. Point coordinates are encoded using signed values. If you only have a few static points, you may also wish to use the interactive polyline encoding utility.
There is a polylinecomplete-event for the drawingManager, observe it to access the polyline(it will be the first argument provided to the callback-function).
Then use polyline.getPath() to access the path and work with it using the methods of MVCArray
Example:
google.maps.event.addListener(drawingManager, 'polylinecomplete', function(line) {
alert(line.getPath().getArray().toString());
});
You can get all the polilynes coordinates 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 this how you call the function
line.addListener('click', function () {
getPathVariableCode(line);
});
Then you just clic on a point to generate the coordinates on the console browser
------------ HERE IS THE COMPLETE 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>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