Forum | Appery.io

how canI display the direction panel that shows step-by-step directions between two places in google map?

Hello Asmaa,

Please look this topic:
http://stackoverflow.com/questions/24...

You have to change URL parameters "origin" and "destination" to yours

I use this java script and it only display blue line between two places

var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var bounds = new google.maps.LatLngBounds();

function initialize() {
console.log('Initializing...');
map = Apperyio("googlemap").gmap;
if (!map)
{
setDelay();
}
else
{
directionsDisplay = new google.maps.DirectionsRenderer();
}
}

function displayDirections(sourceAddress, destinationAddress, map) {
var request = {
origin: sourceAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
directionsDisplay.setMap(map);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert("Directions query unsuccessful. Response status: " + status);
}
});
}

function setDelay()
{
setTimeout(initialize, 50);
}

Hi Sergiy,
I just got your point,
but for the mapping, what shall I use?
I mapped the start_location and end_location with the longitude and latitude
but it doesnt work

Hi Asmaa -

Please show your current mapping structure that you're using.

My app can create a line between current location and destination. To enable that, I used this Java script from this tutorial “GoogleMapJs”

https://devcenter.appery.io/tutorials...

Also, I added a JS to the button that shows directions:
var sourceAddress = new google.maps.LatLng(Apperyio.storage.currentLat.get(), Apperyio.storage.currentLng.get());
var destinationAddress = new google.maps.LatLng(Apperyio.storage.temp.get(), Apperyio.storage.temp2.get());
displayDirections(sourceAddress, destinationAddress, map);

Both of current location and Destination location are variables that stored in the storage

Current location: currentLat, currentLng - Destination: temp, temp2
After that, I created a new RESTservice, then I put this link

http://maps.googleapis.com/maps/api/d...

And the parameters are origin and destination:
I just connected the start location with “currentlat” “currentlng” variables
And end_location with "temp” and “temp2”

http://s7.postimg.org/wyug6ic7f/Captu...

Could you clarify what exactly doesn't work? Do you get directions? Could you show them?

it shows a line between the two locations, but I am trying to show the exact steps, duration and distance to arrive to the destinations

Please use response parameters:
routes-legs-steps-start_location/end_location

instead of:
routes-legs-start_location/end_location

thanks alot
but do I have to use both of before send and success or just one of them?