I have an ajax website that uses the Google Maps API for planning bike routes.
After the route is created (google.maps.DirectionsService) and put on the map (google.maps.DirectionsRenderer), you can drag the route middle-points to adjust the route as you wish -- draggable=true is set in the Ctor of DirectionsRenderer
This is how I initialize the direction service:
_directionsService = new google.maps.DirectionsService;
_directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: _map
});
This is how I request the route:
_directionsService.route({
origin: path[0],
destination: path[1],
waypoints: waypoints,
avoidHighways: true,
travelMode: google.maps.TravelMode["WALKING"]
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
_directionsDisplay.setDirections(response);
} else { /* handle error*/ }
});
The problem is that every drag produces a lot of Google Maps Directions API calls (4-30), thus, I am exceeding my daily quota pretty easily.
Is it normal that a route drag results in so many Google Maps Directions API calls?
Related
I need to display a map on the screen, where there is an itinerary of the places I need to go.
I need it to be displayed in sequence, and for the map to show me the full route of the places I need to go in sequence.
I know that markers can be created, but I would like to create points on the map in sequence starting from a starting location and an ending location, there may be multiple locations but I want the map to trace the full route between the locations in the visit sequence.
I didn't find anything that would allow me to do this in the Google Maps API documentation, is it possible to do this?
In this example, i've done 2 waypoints that the map need to go, and then render the map with those, solving TSP problem (Travelling salesman problem)
loadMap(){
// create a new map by passing HTMLElement
let mapEle: HTMLElement = document.getElementById('map_canvas');
let directionsService = new google.maps.DirectionsService();
let directionsDisplay = new google.maps.DirectionsRenderer();
// create map
this.map = new google.maps.Map(mapEle, {
center: this.start,
zoom: 13
});
directionsDisplay.setMap(this.map);
var request = {
origin:{lat: -34.6496604, lng: -58.4047352},
destination:{lat: -34.650078, lng: -58.402425},
waypoints: //your array of waypoints, example [{
location:{lat: -34.597353,lng: -58.415832},
stopover: true
},
{
location:{lat: -34.608441,lng: -58.406194},
stopover: true
}],
optimizeWaypoints:true,
provideRouteAlternatives: false,
travelMode: 'DRIVING'
};
directionsService.route(request, function(response, status) {
if (status == 'OK') {
directionsDisplay.setDirections(response);
}
});
}
Solved with Javascript API from google maps, for further information check : https://developers.google.com/maps/documentation/javascript/directions
I'm currently using the Google Maps API to find transit routes between two locations. It works fine on almost all occassions, except when the destination is Schiphol, Netherlands (the national Dutch airport).
No matter what the starting location is, the Google Maps API won't find any transit routes that lead to Schiphol. Strange, because when I enter the exact same locations on http://maps.google.com, Google finds plenty of routes. Also, everything works fine when Schiphol, Netherlands is the starting point.
Please refer to this JSFiddle, or the code below.
var directionsService = new google.maps.DirectionsService;
directionsService.route({
origin: 'Rotterdam, Netherlands',
destination: 'Schiphol, Netherlands', // Change this to e.g. 'The Hague, Netherlands' and it works.
travelMode: google.maps.TravelMode.TRANSIT,
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var route = response.routes[0].legs[0];
window.alert('When Schiphol is destination: noute found!')
} else {
window.alert('When Schiphol is destination: no transit routes found.')
}
});
directionsService.route({
origin: 'Schiphol, Netherlands',
destination: 'Rotterdam, Netherlands',
travelMode: google.maps.TravelMode.TRANSIT,
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var route = response.routes[0].legs[0];
window.alert('When Schiphol is origin: route found!')
} else {
window.alert('When Schiphol is origin: no transit routes found.')
}
});
Migrating code from Javascript API 2 to 3. I have a list of locations which i need to plot in the form of a driving directions. This was done in v2 using the following code
directions = new GDirections(map);
directions.loadFromWaypoints(waypoints, {preserveViewport: true});
Here is my attempt at converting this to V3
var request = {
origin: startLoc,
destination: endLoc,
waypoints: waypoints,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
Not the whole code, but the general idea. Seems to work fine, with one little issue. When there are more than 8 waypoints, the call fails. This is expected since Google Maps API v3 Docs states
The maximum allowed waypoints is 8, plus the origin, and destination. Maps API for Business customers are allowed 23 waypoints, plus the origin, and destination. Waypoints are not supported for transit directions.
Since i didn't run in to this issue in v2, is this a new restriction with v3? I wonder if i am using something that was not designed for what i need. This is a very lightly used applicaton with 2 users, so i am not sure if an expensive business license is worth the return. Emails to Google maps team have not yet been returned. Any workarounds/pointers will be of great help. Thanks.
One possible work around (particularly for a lightly used site) is to use multiple DirectionsService requests.
example 1 (addresses)
example 2 (coordinates)
Use Should need to Use array concept like these...
directionsService[i].route({
'origin': start,
'destination': end
'waypoints': waypts,
'travelMode': 'DRIVING'
},
function (directions, status){
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay[j].setDirections(directions);
}
});
in these directionservice and directiondisplay are should be in array logic
and using looping concepts use should need to assign start,end and waypoints dynamically and
try sending multiple request means u ll get the route for n number of latlon's ...but the markers ll be repeat with same name after 8 waypoints for that we remove the default markers by using supressmarkers false property...
As others said, it's imposable to do it using Google's JavaScript API. However, Google does allow up to 23 waypoints with a server-side request. So using PHP and JavaScript, I was able to make a workaround.
What you have to do is get the "waypoint order" from the server side request and then have JavaScript give you directions between each location.
<?php
$startLocation = "40.713,-74.0135";
$endLocation = "40.75773,-73.985708";
$waypoints = array("40.748433,-73.985656|", "40.689167,-74.044444|");
$apiKey = "";
$routeData = json_decode(file_get_contents("https://maps.googleapis.com/maps/api/directions/json?origin=".$startLoc."&destination=".$endLoc."&waypoints=optimize:true|".$waypoints."&key=".$apiKey));
echo "var waypointsOrder = ". json_encode($routeData->routes[0]->waypoint_order) . ";\n";
?>
var startLocation = {lat: 40.713, lng: -74.0135};
var endLocation = {lat: 40.75773, lng: -73.985708};
//get directions from the origin to the first waypoint
var request = {
origin: startLocation,
destination: JSON.parse(places[waypointsOrder[0]][1]),
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderDirections(result, map);
}
});
//get directions from the last waypoint to the destination
var request = {
origin: JSON.parse(places[waypointsOrder[waypointsOrder.length-1]][1]),
destination: endLocation,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderDirections(result, map);
}
});
//get directions between each waypoint
for (i = 1; i < waypointsOrder.length; i++) {
var request = {
origin: JSON.parse(places[waypointsOrder[i-1]][1]),
destination: JSON.parse(places[waypointsOrder[i]][1]),
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderDirections(result, map);
}
});
}
function renderDirections(result, map) {
var directionsDisplay = new google.maps.DirectionsRenderer ({
map: map
});
directionsDisplay.setMap(map);
directionsDisplay.setDirections(result);
}
i am new in sencha touch.
i have integrated google map using sencha touch and display marker on user current location.
now, i want to display direction from source address to destination address on map.
the sample like this,
https://maps.google.com/maps?saddr=21.220901,72.829056&daddr=20.915907,72.871628
i want display only map view with direction path.
how to display direction between two places on goole map using sencha toch ?
here is code,
function directionMap(src,dest){
// alert('calling');
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var request = {
// origin: '21.220901,72.829056',
// destination: '20.915907,72.871628',
origin: src,
destination: dest,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
just call directionMap function with source and destination it will draw path on map.
I tried something which is a bit out of norm on google map. What I am trying to achieve is to draw a route with multiple waypoints which are sometimes can be repeative. Let says, an Origin: A and Destination: B, and waypoints {1, 2, 3, 4, 5, 6, 7, 3, 2, 1}
From above, it will always failed. If I take out the repeat locations it will display the route.
Please help. Thanks in advanced.
wayPoints.push(
{location:new google.maps.LatLng(stepsWP[0], stepsWP[1]),
stopover: false
}
...
var request = {
origin: start,
destination: end,
waypoints: wayPoints,
optimizeWaypoints: false,
travelMode: google.maps.TravelMode.DRIVING
};
var directionsRen = new google.maps.DirectionsRenderer(rendererOptions);
directionsRen.setMap(map);
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRen.setDirections(result);
}else{
console.debug('Something wrong with google...');
}
});
Thanks.
I did some google and found some of the suggestions on the workaround.
http://techquarries.blogspot.com/2010/08/using-more-than-8-waypoints-in-google.html
http://lemonharpy.wordpress.com/2011/12/15/working-around-8-waypoint-limit-in-google-maps-directions-api/
http://mostup.com/2011/02/15/google-map-api-v3-directionsservice-more-than-8-waypoints-workaround/
Here is what I got from Google Map Direction service page:
The maximum allowed waypoints is 8, plus the origin, and destination.
Google Maps API for Work customers are allowed 23 waypoints, plus the
origin, and destination. Waypoints are not supported for transit
directions.
So you basically need to break down your waypoints array into groups of 8 locations and use that to send requests to google direction service api.