I am currently working with the Google Maps API to render directions.
From the technical side everything works fine:
var $canvas = $element.querySelector('#map-canvas');
vvar map = new maps.Map($canvas, {
center: new maps.LatLng(52.46004869999999, 13.37898690),
mapTypeId: maps.MapTypeId.ROADMAP,
zoom: 14
});
var route = {
travelMode: google.maps.TravelMode.BICYCLING,
origin: new google.maps.LatLng(52.455833, 13.322948),
destination: new google.maps.LatLng(52.459281, 13.356367),
};
new google.maps.DirectionsService().route(route, function(body) {
var display = new google.maps.DirectionsRenderer();
display.setMap(map);
display.setDirections(body);
});
Unfortunately the suggested route is absolutely crap. Instead of going directly from A to B it even leaves the city...
Why does this work good with maps.google.com but not with the API? What do I have to change so I get a correct result?
Bodo
The origin is placed on a train station, it seems the DirectionsService suggests to put the car on a train, because there is a vehicle Shipping available.
Google-Maps doesn't use the exact origin, it seems that it geocodes the LatLng and takes the result with type "street_address"(it's Berlinickestraße 16A, 12165 Berlin, Deutschland) as origin.
You may do the same(geocode the LatLng's first and use the results with a type of street_address as origin and destination)
Related
I am using the static image API (where you pass a URL to Google and it returns an image). My issue is the images google is returning are sometimes not straight-on/clear view of the address. I am looking to get the same image as what the Google Maps search feature comes up with as a thumbnail.
I have read the Google Documentation for this API. An example URL is: https://maps.googleapis.com/maps/api/streetview?parameters&size=640x640&fov=50&location=4113+Hartford+Dr+Garland+TX
If I put this same address (4113 Hartford Dr, Garland, TX) directly into Google Maps, I get a much cleaner image.
I have experimented with changing the FOV value. My only other idea is to use heading, but I am unsure about this.
The end implementation is in Excel using VBA.
Let me know if you need any additional information.
You are going to have to compute the heading. I don't have the raw math for that, but here is an example using the JS API, if that's an option.
function getStreetView(lat, lng) {
let panorama = new google.maps.StreetViewPanorama(
document.getElementById('panorama'), {
position: {lat: lat, lng: lng}
})
let service = new google.maps.StreetViewService
service.getPanoramaByLocation(panorama.getPosition(), 50, function(panoData) {
if (panoData) {
let panoCenter = panoData.location.latLng
let heading = google.maps.geometry.spherical.computeHeading(panoCenter, {lat: lat, lng: lng})
let pov = panorama.getPov()
pov.heading = heading
panorama.setPov(pov)
} else {
alert('no streetview found')
}
})
map.setStreetView(panorama) // set dude on map
}
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
Live traffic duration time is different from Google Map application and Google Map Distance Matrix API response.
I have tried the following way to get live traffic duration as showing the Google Map application.
First Way
https://maps.googleapis.com/maps/api/distancematrix/json?
key=<MyKey>&origins=-33.6771817,151.12005739999995&
destinations=-33.7704818,150.98828609999998&travelMode=DRIVING&
departure_time=[Current UTC Time]
Second Way
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [{lat: <lng>, lng: <lng>}, 'Origin Name'],
destinations: ['Destination Name', {lat: <lat>, lng: <lng>}],
travelMode: 'DRIVING',
drivingOptions: {
departureTime: [CurrentUTCTime>],
trafficModel: 'best_guess'
}
}
API results are successfully received but "duration_in_traffic" node value is not match with Google Map Application's live traffic duration time (please refer the attached images)
please assist me what am i doing wrong in this. thanks in advance.
I can get the exact "draffic_in_duration" value by using the first way with departure_time parameter value as now
https://maps.googleapis.com/maps/api/distancematrix/json?
key=<MyKey>&origins=-33.6771817,151.12005739999995&
destinations=-33.7704818,150.98828609999998&travelMode=DRIVING&
departure_time=now
cheers
One question linked an interesting example of mixing API v2 and v3!. Look at the code:
function initialize() {
if (GBrowserIsCompatible()) {
// Create and Center a Map
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
// bind a search control to the map, suppress result list
map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
}
}
GSearch.setOnLoadCallback(initialize);
The map is apparently in v2 but the code new google.maps.LocalSearch() is v3!
How is this possible?
Maybe it's not really API v3. I thought it could be deprecated Local Search API that worked within API v2, but it is not: in this API the object is google.search.localSearch while here it is google.maps.localsearch ... I'm totaly confused.
That example only uses v2, not v3 at all. The v2 API does optionally expose everything under google.maps (for example google.maps.GeoXml) – most people just use the 'G' naming though.
There's also a difference between google.search.LocalSearch (which lets you query Google for local search results) and google.maps.LocalSearch (which is a v2 control). Since both APIs are deprecated, I'd avoid both!
I am starting with google maps. just learning. while ago, it was working. now it's not. everything seems to work in UI Controls, Markers/Overlay but the map is blank.
google.load("jquery", "1.3.2");
google.load("maps", "2");
google.setOnLoadCallback(function() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(103.8, 1.37), 13);
map.setUIToDefault();
map.addOverlay(new google.maps.Marker(new google.maps.LatLng(103.8, 1.37)));
});
The point you are trying to centre the map onto isn't a valid Lat/Lon pair: Latitude runs from +/-90 degrees: you're passing in +103.8
seems like you've got your parameters the wrong way around (Lat +1.37, Lon +103.8 puts you in Malaysia)