All,
When I use the Directions-service from Google Maps, it seems like the map always goes to zoom level 0 (I get an overview of the whole map).
When I set the code for the directions in comment, the zoom level is working well.
This is my code:
/**
* Update route
*/
updateRoute: function ()
{
// route
var start = "Belgium";
var end = "France";
var request =
{
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap(this.items.items[0].map);
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}
This is what I get:
Hopefully someone can help me with this?
Thanks in advance!
The map automatically zooms out to the range required to display the entire route.... I tried ur code.... If you select the start and origin as two places closer (preferably the same area/city) then the zoom level goes down to like 15-16 depending on the distance....
Since you've basically selected Belgium and France (both of which are really broad areas and not a single map point (so to speak) the zoom level goes down to 1 :)
Hope this helps
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 am currently adapting and cleaning up a very simple Google Maps application for users to get walking directions from their current location (determined by GeoLocation) to preset markers designating artworks that are defined with specific LatLng values to the sixth decimal.
There is still a lot of extraneous code in the example that needs to be removed, but the core function is working as expected - almost.
When the user selects a destination from the values supplied in a dropdown menu and hits enter, a lined path appears from where they are to the selected destination - using the calcRoute function.
However, the path is consistently directing the user to the nearest building entrance - which in some cases is several hundred feet away from the LatLng defined in the code. This does not appear to be random inaccuracy, as the path always ends at a building entrance.
I am sure this is a very simple mistake I am making, but I haven't found any posts that seem to address this odd behavior.
I am using Windows 8 and Chrome at the moment for the base development in an attempt to get a working version and then test on other browsers. I appreciate any advice, and will supply all the example code if needed. Here is a sample of some of the typical lines in this app:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
</script>
<script>
var locTreeWrapIII = new google.maps.LatLng(48.006640, -122.203680);
</script>
// Tree Wrap III
var markerTreeWrapIII = new google.maps.Marker({
map: map,
position: locTreeWrapIII,
title: 'Tree Wrap III'
});
var infoTreeWrapIII = new google.maps.InfoWindow({ // info window
maxWidth: 400,
content:
'<img alt="" src="https:\/thumbnail-clothespins.jpg" />' +
'<strong>' + markerTreeWrapIII.title + '<\/strong><br \/><br \/><br \/>
Read more about Tree Wrap III'
});
google.maps.event.addListener(markerTreeWrapIII, "click", function () {
document.getElementById('end').value = "(48.006500,-122.203500)";
infoTreeWrapIII.open(map, markerTreeWrapIII);
infoTreeWrapIII.setZIndex(999);
});
google.maps.event.addListener(markerTreeWrapIII, "dblclick", function () {
map.panTo(locTreeWrapIII);
});
google.maps.event.addListener(infoTreeWrapIII, "closeclick", function () {
infoTreeWrapIII.setZIndex(1);
infoTreeWrapIII.close();
});
function calcRoute() {
// Retrieve the start and end locations and create
// a DirectionsRequest using WALKING directions.
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.WALKING
};
// Route the directions and pass the response to a
// function to create markers for each step.
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function attachInstructionText(marker, text) {
google.maps.event.addListener(marker, 'click', function () {
// Open an info window when the marker is clicked on,
// containing the text of the step.
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}
My guess is that the WALKING travelling mode restricts paths to sidewalks, and thus to the entrances of buildings. Your code looks fine.
According to the API documentation:
walking requests walking directions via pedestrian paths & sidewalks (where available).
so it is very likely that Google has geocoded the the specific LatLng as an address, and is attempting to deliver the walker directly to that address.
A possible, though crude, solution would be to append a final LatLng to the path returned by the Directions Service that is the desired position.
I would like to reproduce a multi direction route sistem on the same Google Map like this website: http://hotelberna.com/en/where-we-are/
The same start point and multiple destinations. When I click on each final destination, then the map show me the new route.
Thanks in advance
I think you must be talking about something like this, right?
http://jsfiddle.net/dm1o1ktf/
(a modified version of the sample code in the documentation)
What you need is to trigger some function like calcRoute when you select a new location; in which you calculate the new route using the directionsService, like this:
function calcRoute() {
var start = "Mountain View, CA";
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
it's a couple of days i'm struggling with this problem i cannot solve.
I have an Android application sending me a certain number of coordinates; each coordinate has a value related to it and what i need to do is to report this points on a map, visualizing different marker colors depending on this value.
I'm tryng to do it via Google maps API.
I have all the points stored in a fusion table and i'm able to build a layer with proper style, but the problem is that these points do not correspond on real streets on the map and it is obviously necessary that they do.
What i am tryng is to use the DirectionsService, as suggested here:(google maps geocoder - point on a street) and i know that gps cannot be so precise.
The way i tried til now is to put all my points in an array (without using the fusion table layer, cause i dunno how to connect the two tehings) and then for each point make a request to the DirectionsService (i know it's terribly slow, but for now i need it to be precise and if you have suggestions it's well accepted) but in this way only certain points are well represented while other have a null response from the service and are not reported at all.
Any suggestion?
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var urbino = new google.maps.LatLng(43.72333292, 12.63552457);
var mapOptions = {
zoom:10,
center: urbino
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start, end;
var waypts = [new google.maps.LatLng(43.72333292,12.63552457), new google.maps.LatLng(43.72333292,12.63552457), new google.maps.LatLng(43.72333292,12.63552457), new google.maps.LatLng(43.72333292,12.63552457)............];
console.log(waypts.length);
$.each(waypts, function(index){
if(index < waypts.length -1){
var request = {
origin:waypts[index],
destination:waypts[index+1],
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
console.log(index);
console.log(response);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
console.log('ok');
}
else{
console.log('non ok');
}
});
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
calcRoute();
});
EDIT
Came out that supplied points were totally wrong (but that was not my job so i just took them), now with new points directionsService works fine even with just some waypoints.
The problem still remains in part, even if much smaller, cause points supplied from the fusion table are not precisely on the street on all the route. So i still need to figure out how to put pieces together, meaning using the route of the directionsService, styled with the fusion table layer. :)
Used points were totally wrong, now with right set of coordinates, the path supplied by fusion Table is almost perfect, on all the streets long, even though there are some points not really on the streets.
So, what i have to figure out now is how to put fusionTable layer (styled) with directionsService (precise).
I am trying reverse geocoding, I have three coordinates and I want to convert them to addresses, I have used following method.
var point1 = new google.maps.LatLng(latLng1);
var point2 = new google.maps.LatLng(latLng2);
var point3 = new google.maps.LatLng(latLng3);
where latLng1, latLng2, latLng3 are coordinates.
and then further I want to use these addresses to following code to create a path
var request = {
origin:location1,
destination:location2,
waypoints:[{location: point1}, {location: point2}, {location: point3}],
travelMode: google.maps.DirectionsTravelMode.WALKING
};
but it never displays anything.
Am I doing it right, One more thing it says in google APIv3 that we can either use string of address in waypoint or latlng. how we can use latlag in waypoint.
Are you showing your whole code here?
Please, post your latLng1 value, for example.
Also, show your directionsService call. I do like that:
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else alert(status);
});
In any case - try do alert() your request statuses, directions may not be available for these points.
By the way you don't need to reverse geocode your coordinates to addresses to get directions. You can use coordinates in waypoints, which is what you doing here.