Develop Reference

dynamic route with Google directions API

Initially I have two points on map. One of them being origin and other being destination.
The origin is dragable while destination is fixed.
When drawing the map for first time after page load, I have some default value for origin, while destination point gets value from database.Initial Loading works fine. I am able to draw route between origin and destination.
I draw directions on map using this below function
function calcRoute() {
var request = {
origin:myLatLng1,
destination:myLatLng,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
Now I have a event listener whenever my origin marker is draged, it gets the new latlong of the new position of orign marker, then I call the same function above to get new route.
function togglePos(){
myLatLng1 = new google.maps.LatLng(marker1.getPosition());
calcRoute();
}
This is where I am facing problem, I am not able to redraw new route between the new marked origin and the same old destination.
This is my initialize function if any1 needs it.
function initialize() {
var mapOptions = {
zoom: 13,
center: myLatLng
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
directionsDisplay.setMap(map);
var image = 'myimage.png';
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
});
marker1 = new google.maps.Marker({
position: myLatLng1,
map: map,
draggable: true
});
google.maps.event.addListener(marker1, 'dragend', togglePos);
calcRoute();
}
I am not getting any javascript error.
I am building something like this.
https://developers.google.com/maps/documentation/javascript/examples/directions-simple
But instead of selecting it from drop down box, I am calling the function when marker is moved.
Fiddle link: http://jsfiddle.net/FvqAL/4/
But i have no idea why its not working on fiddle :|

I made some changes in calc route, now whenever it is called, it get marker1 position and draw route through it.
function calcRoute() {
var request = {
origin:marker1.getPosition(),
destination:myLatLng,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
Here is final fiddle if you want to check it out.
Thanks for helping :)

Geolocation using current location as variable

I have adapted this code to try and get it to work for my situation. What I am attempting to do is find the visitors current location, and map directions to a certain location on load.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(38.3094610,-85.5791560)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}
function calcRoute() {
var start = 'current location';
var end = ('38.3094610,-85.5791560');
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
What I'm needing is to store the current location in a variable so I can use it in the
calcRoute function as start.

First detect whether the browser supports geo tracking at all:
if (!window.navigator||
!window.navigator.geolocation||
!window.navigator.geolocation.watchPosition) return;
Then build location handlers:
function geo_success(pos){
var lat=pos.coords.latitude;
var lng=pos.coords.longitude;
//do your mapping magic here
}
function geo_error(pos){
// do nothing
}
Now register the tracker:
navigator.geolocation.watchPosition(
geo_success, geo_error,
{enableHighAccuracy:true, maximumAge:10000, timeout:10000});

Are you asking how to get the gelocation from the browser? If so, try this article
TL;DR
navigator.geolocation.getCurrentPosition(callback);
where callback is a javascript function to call after the user's location has been determined.

resize google maps not working and takes long time

At first, my problem was that the google maps with direction service was not loading correctly. After some researches, i find google.maps.event.trigger(map, 'resize'). Ok, now it works. Kinda.
The order of my app is: page x, page A with the map and the direction, page y, page B with the map and the direction.
My script is:
function initialize(mapa_id) {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 17,
mapTypeControl: false,
zoomControl: false,
draggable: false,
center: new google.maps.LatLng(-23.583693,-48.042186),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(mapa_id), mapOptions);
google.maps.event.trigger(map, 'resize');
directionsDisplay.setMap(map);
if(mapa_id == 'map-canvas'){
navigator.geolocation.getCurrentPosition(rotaInicial, onError, options);
}else{
directionsDisplay.setMap(map);
navigator.geolocation.getCurrentPosition(rotaFinal, onError, options);
}
}
function rotaInicial(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var start = new google.maps.LatLng(latitude,longitude);
var end = new google.maps.LatLng(-23.578659,-48.038045);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
google.maps.event.trigger(map, 'resize');
directionsDisplay.setDirections(response);
}
});
}
function rotaFinal() {
var start = new google.maps.LatLng(-23.578659,-48.038045);
var end = new google.maps.LatLng(-23.585503,-48.038324);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
google.maps.event.trigger(map, 'resize');
directionsDisplay.setDirections(response);
}
});
}
So, what happens now: the page A loads the map first (correctly and with no directions) and then after a few seconds (5 - 8) the 'resize' happens and it shows the directions. Then it goes to page y, after click the button it goes to the page B and the map appears only on the top left. After a few seconds again, the 'resize' happens and show the directions. when i do this routine again (back to page x), the first map loads also in top left and it happens all those things.
I have two problems.
When the page loads, i want to show the map already with directions.
If is not possible ok, but at least it should load the map correctly. And this resize should work faster.
I'm not sure if i put the 'resize' code in the right place. Any ideas?

you call both functions that will draw the route(rotaInicial & rotaIFinal) in the success-callback of navigator.geolocation.getCurrentPosition . getCurrentPosition will be executed asynchronously and it may take some time till you get a result.
Therefore, as long as you need to set the direction based on the users location, there isn't anything you can do to speed-up the drawing of the directions.

Google maps v3: adding a new map when function 'failure' called

On the contact page of my site two things can happen:
The user has geolocation enabled, and a map (map-canvas) will display a route from their location to a predefined location dest. This feature works fine.
The user doesn't have geolocation enabled or chooses not to allow it. An alert will show (works fine), and some text will be added to the directions-panel (works fine). The third thing I want to happen in this scenario is a new map be added to map-canvas that is centred on dest, this feature doesn't seem to be working and I can't figure out why.
Code below should give a good representation of the above:
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var dest = "Unit 20, Tallaght Business Centre, Whitestown Road, Tallaght Business Park, Ireland";//53.282882, -6.383155
var ourLocation = {lat : 53.282882, lng : -6.383155}//centre attribute of the map must be a LatLng object and not hardcoded as above
function initGeolocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition( success, failure );
}
}
//create a new map centered on user's location, display route and show directions
function success(position) {
directionsDisplay = new google.maps.DirectionsRenderer();
coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions-panel"));
calcRoute();
}
//calculate the route from user's location to 'dest'
function calcRoute() {
var start = coords;
var end = dest;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
//tell user geoloc isn't enabled and just plot 'ourLocation' on 'map-canvas'
function failure() {
alert("Your browser does not have geolocation enabled so we can't give you directions to our office. Enable geolocation and try again, or consult the map for our address.");
$("#directions-error-message").css({
visibility: 'visible'
});
var destMapOptions = {
zoom:13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(ourLocation.lat, ourLocation.lng)
}
map = new google.maps.Map(document.getElementById("map-canvas"), destMapOptions);
}
</script>
Anyone have any ideas why this isn't working? All help appreaciated.
EDIT: Working version above

You need to pass the map a LatLng object for it's centre, not an address. You will need to use Googles LocalSearch services to make that work.
var dest = {
lat : 53.282882,
lng : -6.383155
}
var destMapOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(dest.lat,dest.lng)
}
Also, as you have map declared as a var already maybe use that rather than a function scoped variable for the map.

The center attribute of the map options must be a LatLng object. You've got it hardcoded as an address string.

Google Maps Direction service sometimes fails

I used the following code to display a google Maps Direction from a Source to Destination and it was working fine when i used Towns in source and destination like : Cairo , Tanta
But if I used a certain Addresses as Source and destinations it is not working like :
Source : "Pizza station, Tanta, Al Gharbiyah, Egypt"
Destination : "Tanta, Tanta Qism 2, Al Gharbiyah, Egypt"
but it is working in the google maps main website http://g.co/maps/dvp2y
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var request = {
origin: 'Tanta',
destination: 'Cairo',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
Is there any way to give it the source address and destination address and return the way between them ?

I get a direction when I use your origin and destination, but not the same as in the google-map. I would assume that the google-map will request the places instead of geocoding the addresses, so you may do the same:
first request the locations using the places-library
then request the direction using the results from the places-request

The official site might not use the same code like yours.
Try to see the status returned.
directionsService.route(request, function(response, status) {
alert(status);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});