Menu
according to google maps i can plan a route that crosses over several waypoints. It is explained here:http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Routes
Now the api wants me to add the waypoints like this:
location: waypoints
so waypoints is an array wich i have to assign to the location: parameter but from what ive seen in the demo they fill the array with strings of the locations. What i was wondering if it was possible to pass the latitude and longitude instead of the strings?
update: this is the part where i try to create a route. i have put the same value in location throughout the entire loop for now but id doesn't work if i use variable values neither
function calcRoute() {
var waypts = [];
for (var i in owt.stores.spotStore.data.map) {
waypts.push({
location: new google.maps.LatLng(12.3, -33.6),
stopover:true
});
console.log(waypts);
}
var request = {
origin: new google.maps.LatLng(50.82788, 3.26499),
destination: new google.maps.LatLng(50.82788, 3.26499),
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
;
981
Open the Settings menu and tap Privacy, then tap Location Services. Check that the Location Services toggle is green and in the on position. Tap Google Maps and make sure that Precise Location is turn on. From the same screen, select the While Using the App or Always option.
According to the API reference:
A DirectionsWaypoint represents a location between origin and destination through which the trip should be routed.
location LatLng|string Waypoint location. Can be an address string or LatLng. Optional
So creating a new Waypoint with a lat-long value should be as below
return {
location:new google.maps.LatLng(12.3, -33.6),
stopover:true
};
According to google documentation the waypoint can be either a string or a LatLng object. http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsWaypoint
here is an example using LatLng
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="initial-scale=1.0, user-scalable=no"/><meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(-40.321, 175.54);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var waypts = [];
stop = new google.maps.LatLng(-39.419, 175.57)
waypts.push({
location:stop,
stopover:true});
start = new google.maps.LatLng(-40.321, 175.54);
end = new google.maps.LatLng(-38.942, 175.76);
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:70%;height:80%;">
</div>
<br />
<div>
</div>
</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
