function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Test Dev 81Test 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 
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
ShivankurShivankur (Salesforce Developers) 
Hi 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.