I've created a code to draw on a map a drawing direction but with polyline because with waypoints I can just see eight points.
First I have a function nArray()
which returns me a value like the one shown in this console:
Array[5]
0: Object
1: Object
DISTANCE_FROM_PREVIOUS_OBJECT_LOCATION: 2.087970147789207
lat: "48.866588"
leftPosition: 183
lng: "2.309037999999987"
topPosition: 57
__proto__: Object
2: Object
3: Object
4: Object
length: 5
__proto__: Array[0]
Now I want to all objects (latitude, longitude) set as a point in:
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script>
var map = null;
var directionService = null;
var directionsRenderer = null;
var bigArray = nArray();
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(35.75936182169444, -90.35907120698232),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 4
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
directionService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
}
function drawDirections(myPath) {
var myLine = new google.maps.Polyline({
path: myPath,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
myLine.setMap(map);
}
function drawRoutes() {
var i;
var npts = bigArray.length - 1;
for (i = 0; i < npts; i++) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(bigArray[i].lat, bigArray[i].lng)
});
var request = {
origin: new google.maps.LatLng(bigArray[i].lat, bigArray[i].lng),
destination: new google.maps.LatLng(bigArray[i + 1].lat, bigArray[i + 1].lng),
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
directionService.route(request, function(result, status) {
//route = result.routes[0];
if (status == google.maps.DirectionsStatus.OK) {
drawDirections(result.routes[0].overview_path);
}
});
}
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(bigArray[i].lat, bigArray[i].lng)
});
}
</script>
</head>
<body onload="initialize();">
<div id="map" style="width: 500px; height: 400px;"></div>
<input type="button" onclick="drawRoutes()" value="Draw Routes" />
</body>
</html>
How to get the latitude and longitude for every object from nArray
?