Geek Answers Handbook

Google maps showing route

according to google maps, I can plan a route that crosses several waypoints. This is explained here: http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Routes

Now api wants me to add waypoints as follows:

location: waypoints

therefore waypoints is an array that I need to assign to the location: parameter, but from what they saw in the demo, they fill the array with lines in places. What I was wondering is it possible to pass latitude and longitude instead of strings?

update: this is the part in which I am trying to create a route. I put the same value in the location in the whole loop, but id does not 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); } }); } ;
+6
javascript google-maps
source share
3 answers

According to the API link :

A DirectionsWaypoint is the location between the source and destination through which the trip should be routed.

LatLng location | line Waypoint location. May be an address bar or LatLng. Additionally

So creating a new waypoint with lat-long value should be lower

 return { location:new google.maps.LatLng(12.3, -33.6), stopover:true };
+10
source share

Point points can be either a string or latlng.

http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/services.html#Directions

In particular:

waypoints [] (optional) specifies an array of DirectionsWaypoints. Waypoints change the route by routing through a specified location (s). the waypoint is indicated as an object literally with the fields shown below:

 location specifies the location of the waypoint, either as a LatLng or as

a String to be geocoded. stop is a logical value that indicates that the waypoint is a stop on a route that splits the route into two routes.

(For more information about waypoints, see Using Waypoints in Routes below.)

EDIT

Your paths are invalid for routing, i.e. they are in the water - try to center the map on (12, -33.6) .

Here's a sample using waypoints (not the most beautiful code, but this is an example;)).

 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> var myRouter = { map_: null, directionsHelper_: null, stores: [ {name: "store1", location: new google.maps.LatLng(50.82788, 3.76499)}, {name: "store2", location: new google.maps.LatLng(51.02788, 3.9)} ], calcRoute: function() { var waypts = []; for (var i in this.stores) { waypts.push({ location: this.stores[i].location, stopover:true }); } var request = { origin: new google.maps.LatLng(50.82788, 3.26499), destination: "Antwerp", waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.DirectionsTravelMode.DRIVING }; var _SELF = this; this.directionsHelper_.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { _SELF.directionsDisplay_.setDirections(response); return; } console.log('Directions Status: ' + status); }); }, init: function(mapid) { this.directionsHelper_ = new google.maps.DirectionsService(); this.directionsDisplay_ = new google.maps.DirectionsRenderer(); var center = new google.maps.LatLng(50.82788, 3.26499); var myOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: center } this.map_ = new google.maps.Map(document.getElementById(mapid), myOptions); this.directionsDisplay_.setMap(this.map_); this.calcRoute(); } }; $(document).ready(function() { myRouter.init('map'); }); </script> <style type="text/css"> #map { height: 500px; width: 600px; border: 1px solid #000; } </style> </head> <body> <div id="map"></div> </body> </html>
+2
source share

According to Google documentation, a 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 of 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>
+2
source share

More articles:


All Articles