Using the google.maps.DirectionsService.route() and google.maps.DirectionsRenderer.setDirections() method, is it possible to change the text on the info window for the destination, without creating a custom parser for the journey?
I couldn't see anything in the API which allowed you to access the markers of the route.
I don't want any code, just yes/no, and a hint for the right direction to take.
Current Function:
var request = {
origin: origPoint,
destination: new google.maps.LatLng(dest.lat(), dest.lng()),
travelMode: google.maps.DirectionsTravelMode.DRIVING,
region: "GB"
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
Thanks,
Psy
I'm afraid that the api doesn't offer a direct way to access the info windows or access the markers.
But there are several ways to achieve that parsing parts of the result data:
I guess the simplest way to change text on the info window is to overwrite the DirectionsLegs' start and/or end addresses of the DirectionsResult. You have to do it before calling directionsDisplay.setDirections(result).
Or you can display just the polyline (see suppressMarkers and suppressInfoWindows of renderer's options) and create the markers and infowindows yourself - you have to access data from DirectionsLegs of DirectionsResult.
I would prefer the second way since it's cleaner and you have more freedom in adjustments. The first way, it's only a hack and you are just changing the text.
Related
I have a SPA that I need to be able to provide the user directions between two points. I want the directions to work that same way that they do currently on the web version of google maps. IE. https://www.google.ca/maps/dir/ in the hosted by google web version when you request directions it will give you the fastest route considering traffic... (See Screenshot)
Currently when I issue the request using the following code it only returns a single route that does not consider traffic.
var directionsService = this.get('directionsService');
var directionsDisplay = this.get('directionsDisplay');
directionsService.route({
origin: new google.maps.LatLng(this.get('currentLocation.lat'),this.get('currentLocation.lng')),
destination: new google.maps.LatLng(toAddress.lat,toAddress.lng),
travelMode: 'DRIVING',
provideRouteAlternatives: true
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
Does anyone know thr correct way to do this?
Check number of routes returned by DirectionService.route, the callback will have a DirectionsResult object with an array of DirectionsRoute, which contains the information about the legs and steps its composed.
If its only returning 1 route, try to set provideRouteAlternatives to true in your DirectionsRequest object.
Happy coding!
TyBourque.
I think current google map API doesn't support direction map with traffic layer.
It is only available using embedded map API.
If you have already found the best solution (not using embedded map API), please write here
Regards
I am trying to find a specific listing via the google-maps-places API, but I don't get any results. This is strange to me, as there is a Google+ page and also a google-maps entry.
Let's take a look at the links:
Google+:
https://plus.google.com/115673722468988785755/about
Maps:
https://www.google.de/maps/place/AMWAY+Beratung+%26+Vertrieb+Haegebarth/#53.171976,9.465828,17z/data=!3m1!4b1!4m2!3m1!1s0x47b106116fc69d69:0xe17811ab2780c71d
If I use the very same coordinates from the maps entry in my nearby search and use the name from the entry as the keyword (or location for what it's worth) the results is empty.
Places-API (with exact same coordinates):
https://maps.googleapis.com/maps/api/place/nearbysearch/json?sensor=false&radius=2000&name=amway&location=53.171976,9.465828&language=de-DE&key=YOURKEY
I can of course imagine that the db for the Google+ POIs is a different one. But then again I don't see how the maps api does not find what I can find on the maps web app.
Thanks a lot for any help!
Try something like this:
map.places.nearbySearch({
location: latLng,
rankBy: google.maps.places.RankBy.DISTANCE,
types: ['shop'], // optional
name: "AMWAY Beratung & Vertrieb Haegebarth" // optional
},function(results, status){
if (status == google.maps.places.PlacesServiceStatus.OK) {
// The thing you need should be result[0]
// console.log(results[0]);
if (results[0].name == "AMWAY Beratung & Vertrieb Haegebarth") { // optionally check the type
// You have your place :)
}
}
}
What a workaround! Rumours are that the Google Maps JS API v3.20 or later will allow us to trigger click events on POIs, thereby getting Place objects directly.
Update:
I have some gps locatiwaon points and i want to draw the path.I the way draw using polylines which dont follow road.I want to do "snap to road",so that i can improve the way path.
I referred this code to snap to road for the locations saved in array "snap_path_points"
I am getting path only for first 8 calls (limitation),below is code
var service = new google.maps.DirectionsService(), poly,snap_path=[];
poly = new google.maps.Polyline({ map: map });
for(j=0;j<snap_path_points.length-1;j++){
service.route({
origin: snap_path_points[j],
destination: snap_path_points[j+1],
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
poly.setPath(snap_path);
}
});
}
I divided my locations to batches of 8 and tried the same (i.e if 24 points use 3 for loops ) but i am getting OVER_QUERY_LIMIT.
i wonder how its working with event listener here.
OVER_QUERY_LIMIT indicates the webpage has sent too many requests
within the allowed time period.
Is there anyway to plot complete snap to road path with more than 8 points.
The problem is not that you sent too many points it is that you made too many request in the given time period. The snap to roads api states that:
Users of the standard API:
2,500 free requests per day and 10 requests per second
So if you sent more request than the limit described above, it is the reason why you are getting that error.
This is my code :
function traceRoute(part, arr) {
var polylineTrattaTreno = new Array();
var request = {
origin: part,
destination: arr,
travelMode: google.maps.TravelMode.TRANSIT
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
... manage my data
} else {
console.log(status);
}
});
}
and I noticed that if I call this function 3 times, all is ok! Than I always get OVER_QUERY_LIMIT. Tried on putting timeout of 1 or 2 seconds. But nothing happens. Seems that I can't do more than 3 request for time?
According to the Documentation-
Use of the Google Directions API is subject to a query limit of 2,500
directions requests per day. Each directions search will count as a
single request against your daily quota when the mode of
transportation is driving, walking or cycling. Searching for transit
directions will count as 4 requests.
Adding to it-
Additionally, note that Directions API URLs are restricted to 2048
characters, before URL Encoding. As some Directions service URLs may
involve many locations along a path, be aware of this limit when
constructing your URLs.
Your origin and destination values might be quite distant and also considering the fact you are using transit direction, causing the limit being reached soon.
Update- If you set the mode to "transit" you must also specify either a departure_time or an arrival_time.
i have a problem about HTML5 geolocation feature. I use the code below to get location data. I use "enableHighAccuracy: false" option to work with Cell Based GPS feature. Accurancy is low but response it too fast. But some people always use Built-in GPS with their mobile phone, so this code does not work for them. Bu if i change accurency option as "enableHighAccuracy: true" it works for them. But this time, the code uses only built-in GPS. not CELL based GPS.
The question -> How can i do that : First, try to get position from Built-in GPS with timeout (e.g. 5000ms ) if position cannot be got in this time just look for Cell Based position for timeout (e.g. 10000ms) if position cannot be get in this time, return an error message .
Here is the code that i use now.
Thanks in advance.
function getLocationfromGoogle() {
navigator.geolocation.getCurrentPosition(
function(pos) {
$("#lat_field").val(pos.coords.latitude);
$("#long_field").val(pos.coords.longitude);
var geocoder = new google.maps.Geocoder();
var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude);
geocoder.geocode({ 'latLng': latLng}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//console.log(results[0].formatted_address);
$("#adresim").val(results[0].formatted_address);
}
else {
alert('Google convertion is not succesfully done.');
}
});
},function error(msg){
alert('Please enable your GPS position future.');
},{maximumAge:600000, timeout:5000, enableHighAccuracy: false}
);
}
You should also be aware that the implementation of this varies from phone OS to phone OS - what works on Android may or may not work on iOS, BlackBerry, WindowsPhone, etc.
You're almost there, you just need to:
Specify enableHighAccuracy: true (you have it set to false)
Handle the timeout error case in the error handler. If the error from the high accuracy query is timeout, then try it again with enableHighAccuracy: false.
Have a look at this sample code.
You should also note that when testing this on a few devices, it returns location derived from WiFi even when enableHighAccuracy: true.
The code mentioned here: http://jsfiddle.net/CvSW4/ did not work for me during error handling.
The reason is that the error functions accept a parameter named 'position' but use an object in the functions called 'error'.
function errorCallback_highAccuracy(position) { ... }
function errorCallback_lowAccuracy(position) { ... }
The solution to fix this was to switch the error methods to accept the input value as a parameter named 'error' and not 'position', since the error callbacks do not accept a position and throw an error object instead.
function errorCallback_highAccuracy(error) { ... }
function errorCallback_lowAccuracy(error) { ... }
I mention it here, because I could not post on the resulting example page and also, this is the location where I linked through to find the code sample mentioned above.