Forum | Appery.io

I went through the tutorial for Google Directions Api http://devcenter.appery.io/tutorials/... and the service is not working for me. This my javascript:

try{

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

function initialize123() {
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); 
     } 
 }); 

}

}
catch(e){
console.log(e);
}

The javascript for the button:

//=================================
var sourceAddress = $('#location_input1').val();
console.log("sourceAddress: " + sourceAddress);

var destinationAddress = Appery("event_Address").text();
console.log("destinationAddress: " + destinationAddress);

var map = Appery("directionsMap").gmap;
//var panel = Appery("directionsPanel")[0];

//====================================

var panel = Appery("panelMap")[0];

//displayDirections(sourceAddress, destinationAddress, map, panel);

try {

 displayDirections(sourceAddress, destinationAddress, map, panel); 

} catch (e) {

 console.log(e); 

}

On load:

initialize123();

Hello!

Please replace prevar directionDisplay; /pre with prevar directionsDisplay;/pre

I changed it but it still not working.

I added logs to the functions to see where the code stops at. It looks like it is stopping right before the directionsService.route function

Hi Adam,

Did you add codehttps://maps.googleapis.com/maps/api/js?v=3.exp/code in App settings/External resources?

I added it. Its still not working.

Now I have got the directions to show in the panel but the map still doesn't show the directions.

Problem fixed.

var directionsDisplay;
var directionsService;

function initialize1() {

var map = Apperyio("directionsMap").gmap;
if (!map)
{
setDelay();
}
else
{

     directionsDisplay = new google.maps.DirectionsRenderer(); 
  directionsService = new google.maps.DirectionsService(); 
  console.log("Directions was initialize..."); 

     var sourceAddress = localStorage.getItem("sourceAddress"); 

//console.log("sourceAddress: " + sourceAddress);

var destinationAddress = localStorage.getItem("destinationAddress");
//console.log("destinationAddress: " + destinationAddress);

var map = Appery("directionsMap").gmap;
//var panel = Appery("directionsPanel")[0];

//====================================

var panel = Appery("directionsPanel")[0];

//displayDirections(sourceAddress, destinationAddress, map, panel);

  displayDirections(sourceAddress, destinationAddress, map, panel); 
 } 

}

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

function displayDirections(sourceAddress, destinationAddress, map, panel) {
//var directionsService = new google.maps.DirectionsService();
//var directionsDisplay = new google.maps.DirectionsRenderer();

 var request = { 
     origin: sourceAddress, 
     destination: destinationAddress, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
 }; 

 console.log("Directions took input: Source = " + sourceAddress + ", Destination = " + destinationAddress); 
 try { 

     directionsService.route(request, function(response, status) { 

         if (panel != null) { 
             directionsDisplay.setPanel(panel); 
         } 

         //directionsDisplay.setMap(map); 
         //var map = new google.maps.Map(map); 
         //var map = map; 
         directionsDisplay.setMap(map); 

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

 } catch (e) { 
     console.log(e); 
 } 

}

ty i got my panel for directions to work now too