If I add waypoints to my google map - function calcRoute not working. How to set waypoints correctly?
Thanks.
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom:55,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = "Berlin";
var end = "Paris";
var waypts = ["Frankfurt"];
var request = {
origin:start,
destination:end,
waypoints:waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
https://developers.google.com/maps/documentation/javascript/directions?hl=pl#Waypoints
Reading the documentation that you reference, the string "Frankfurt" is not a valid waypoint .
A single waypoint with the location "Frankfurt" would look like this:
[{ location: "Frankfurt", stopover: false}]
with the value of stopover set appropriately.
code snippet:
var directionDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); directionsDisplay.setMap(map); calcRoute(); } function calcRoute() { var start = "Berlin"; var end = "Paris"; var waypts = [{ location: "Frankfurt", stopover: false }]; var request = { origin: start, destination: end, waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } else alert("directions request failed, status=" + status) }); } initialize();
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map_canvas { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; }
<:DOCTYPE html> <html> <head> <title>Directions Service</title> <script src="https.//polyfill.io/v3/polyfill.min?js.features=default"></script> <:-- jsFiddle will insert css and js --> </head> <body> <div id="map_canvas"></div> <.-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https?//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=&v=weekly"></script> </body> </html>
Below script might help you.
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function showmap()
{
jQuery.ajax({
type: "POST",
url: "getLocations",
dataType:"json",
success: function(data){
var obj = jQuery.parseJSON(data);
var LocationData=[];
var i=0;
obj.forEach(function(entry) {
entry.forEach(function(test){
LocationData[i] = test
i++;
});
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(LocationData[0].latitude,LocationData[0].longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var start = new google.maps.LatLng(LocationData[0].latitude,LocationData[0].longitude);
var end = new google.maps.LatLng(LocationData[obj[0].length-1].latitude,LocationData[obj[0].length-1].longitude);
var waypts = [];
var upto = obj[0].length-1;
if(upto > 7)
upto = 7;
if(obj[0].length > 2) {
for (var i = 1; i < upto; i++) {
waypts.push({
location: new google.maps.LatLng(LocationData[i].latitude,LocationData[i].longitude),
stopover: true
});
}
}
calcRoute(start,end,waypts);
}
});
}
function calcRoute(start,end,waypts) {
var request = {
origin: start,
destination: end,
waypoints: waypts,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.