Forum | Appery.io

hello,
I have a problem with the centering and zooming of a google map that displays directions.

in my app i have a page with a panel (it has been built within a grid) and some buttons.
In my panel i added a google map component and i added to the app a java script asset:

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

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

function displayDirections(sourceAddress, destinationAddress, waypoint){
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(39.4939, 16.3846),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($('div[dsid="googlemap_strade"]').get(0), myOptions);

 var request = { 
     origin: sourceAddress, 
     destination: destinationAddress, 
     waypoints: [{ 
         location: '"' + waypoint + '"', 
         stopover: false 
     }], 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 

 }; 

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

         if (status == google.maps.DirectionsStatus.OK) { 

             directionsDisplay.setDirections(response); 

         } else { 
             alert("Si è verificato un prolema. Response status: " + status); 
         } 
     }); 
 } 
 directionsDisplay.setMap(map); 
 getDirections(); 
 /code 

on the page load event i added code initialize() /code

on one of the buttons in the page where i want to show the map, on a click events i

1) open the panel running the js (codewindow.awesomeMenu_mapStrade2.panel("open");/code

2) i run the JS: codevar sourceAddress = "Cosenza&quot
var destinationAddress = "Castrovillari, CS&quot
var waypoint = "Cassano allo ionio, CS&quot
displayDirections(sourceAddress, destinationAddress, waypoint);/code

the problem is that the first time i click the button my panel opens correctly but it displays a map that is not centered in the right way and the zoom is to low

while if i click again to the same button i get the map i want:

how can i get the right map on the first button click?

Hello! Please check are there any errors in console?

there are no errors in the console

if i add codeconsole.log("back from displayDirections map.center="+map.center+" and map.zoom ="+map.zoom); /code at the end of my JS Asset i Get :
back from displayDirections map.center=(39.4939, 16.384599999999978) and map.zoom =6 in the console

Hi,

Please try this solution: http://stackoverflow.com/questions/61...

i read the solution you linked me, but i'm not able to figure out how this solution could help me.
in my map i have no explicit markers
the only markers you can see in the second figure are the origin/destination parameters in the request used by directionsService.route.

my problem is that the first time i click the button my panel opens correctly but it displays a map that is not centered in the right way and the zoom is to low
while if i click again to the same button i get the map i want.
how can i get the right map on the first button click?

Hi,

Please share the application with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and tell how to reproduce this.

i already shared the application (the name is "strade del vino cs") to reproduce the problem , you have first to click to "Le Strade", then, on the new page, to the first, or second list item and then to the button with the map icon on the page's left size.
The first time you click, a panel with a map will be open. The map will report the direction route, but the map is both not centered properly and zoomed out.
if you click again to the same button the map is reloaded and both centered and zoomed properly.
I guess that there is some problem with the panel. because a use the direction code in another page (mappa) accessible from the menu and the map works as i want.

thanks for the kind help and merrry christmas in advance

Hi,

Thank you, we'll take a look.

Hello! You've changed JQM source files. Try to undo these changes http://docs.appery.io/tutorials/sourc... (see Restoring files and folders section).