You need to sign in to do that
Don't have an account?
Test Dev 81
Google Map Direction in visualforce page
Hi Everyone,
I am showing the path from source A to Destination B in Vf page using JS
travel mode: DRIVING
I want to show the path by another travel mode if there is no path using DRIVING returned
I am not that good in JS or Jquery
can you please suggest to me how to do this, here I am sharing my VF page code
and also can I use the bind variable in the script tag to add auth key from the apex variable
Thank you
Rahul
I am showing the path from source A to Destination B in Vf page using JS
directionsService.route({ origin: start, destination: end, optimizeWaypoints: true, travelMode:'DRIVING' }, fun
travel mode: DRIVING
I want to show the path by another travel mode if there is no path using DRIVING returned
I am not that good in JS or Jquery
can you please suggest to me how to do this, here I am sharing my VF page code
<apex:page standardController="sustain_app__EnergyConsumption__c" extensions="Rg_DistanceCalculator"> <html> <head> <style> #map-layer { max-width: 1500px; min-height: 550px; } .lbl-locations { font-weight: bold; margin-bottom: 15px; } .locations-option { display:inline-block; margin-right: 15px; } .btn-draw { background: green; color: #ffffff; } </style> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> </head> <body> <div id="map-layer"></div>s <script> var map; var waypoints; function initMap() { console.log('Init Method..! '); var mapLayer = document.getElementById("map-layer"); var centerCoordinates = new google.maps.LatLng(39.888250,-83.088370); var defaultOptions = { center: centerCoordinates, zoom: 8,scrollwheel: true, } map = new google.maps.Map(mapLayer, defaultOptions); var directionsService = new google.maps.DirectionsService; var directionsDisplay = new google.maps.DirectionsRenderer; directionsDisplay.setMap(map); var addressArray = {!listOfAddresses}; // Use this format to fill addressArray var start =addressArray[0]; var end = addressArray[1]; console.log('Start : ',start); console.log('end : ',end); //map.fitBounds({!listOfAddresses}); setTimeout(function(){ drawPath(directionsService, directionsDisplay,start,end); }, 2000); } function drawPath(directionsService, directionsDisplay,start,end) { console.log('Drawing Path !!!!!'); console.log(start+' '+end); directionsService.route({ origin: start, destination: end, optimizeWaypoints: true, travelMode:'DRIVING' }, function(response, status) { if (status === 'OK') { directionsDisplay.setDirections(response); } else { console.log('Problem in showing direction due to ' + status); } }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AUTH_KEY&callback=initMap"> </script> </body> </html> </apex:page>
and also can I use the bind variable in the script tag to add auth key from the apex variable
Thank you
Rahul
Since, travelMode is required field while using the Maps Javascript API, it would be necessary to provide some value to this variable in your script.
In order to avoid it failing or any issues, you can provide options to the user in UI and based on selection you can show the path.
Example for the same can be found at below link:
https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes#maps_directions_travel_modes-javascript
You might need to modify the code and use case a bit but it will ensure that the functionality never fails to work due to implementation done around.
For the 2nd requirement, you can make use of OAuth 2.0 Authentication for JavaScript Remoting.
Reference:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_js_remoting_oauth.htm
Hope above information helps, Please mark as Best Answer so that it can help others in the future.
Thanks.