Google Map and Google Directions API with panel component for displaying directions

[William Fulton]

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.

[Serhii Kulibaba]

Hello William,

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

[William Fulton]

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);

Code: Select all

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

}

[William Fulton]

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

Thanks!

[Maryna Brodina]

Thank you for update!

[Jon Haider]

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!!

[Asmaa AlHammadi]

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?

[Asmaa AlHammadi]

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