Forum | Appery.io

Hi,

I followed this tutorial to add directions to my app:
http://docs.appery.io/tutorials/build...

The only change I have made is putting the html component inside a panel component and adding a new javascript action to the Get Directions button that opens the panel.

The problem I am having is that the directions do not display in the panel. Is there a different way I need to reference a component if it sits inside a panel component?

You can see the result here:
http://appery.io/app/mobile-frame?src...

After going to the Apopka page click on Get Directions to see the results.

Hello William,

No matter component is inside a panel, or outside it.
Please show your mapping geolocation service to html component.

This implementation does not use the geolocation service. The main javascript references the html component in the code using the variable "panel" in which we declare the component name to be var panel on the button push.

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

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
}

function displayDirections(sourceAddress, destinationAddress, map, panel) {
var request = {
origin: sourceAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (panel !== null) {
directionsDisplay.setPanel(panel);
}
directionsDisplay.setMap(map);

   if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
   } else { 
     alert("Directions query unsuccessful. Response status: " + status); 
   } 
 }); 

}

Ok, this is solved. I was missing a piece of the button click handler.

Thanks!

Thank you for update!

William,
Are you able to clear the text directions in the panel before the service is run again? I have created the same thing as you in my app, but the text directions are appending to the bottom of the existing text directions, so every time the directions function is run, the list gets longer and longer. (No good)

I found on stackOverflow this idea, but it isn't working:

pre
document.getElementById("directionsPanel").innerHTML = "";
/pre
I also tried:
pre
Appery("directionsPanel").innerHTML = "";
/pre

Thanks!!

I did the requested steps for displaying directions from this tutorial https://devcenter.appery.io/tutorials...

but to display the panel that shows step-by-step directions, I add panel variable to the JS but it doesn't work with me

can someone help me please to show the panel beside the map?

I use this code
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
}

function displayDirections(sourceAddress, destinationAddress, map, panel) {
var request = {
origin: sourceAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (panel !== null) {
directionsDisplay.setPanel(panel);
}
directionsDisplay.setMap(map);

if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert("Directions query unsuccessful. Response status: " + status);
}
});
}

it doesn't work with me