s Thank You Rahul​​​​​​​", "answerCount": 3, "upvoteCount": 0, "datePublished": "2021-02-18T14:25:46.000Z", "author": { "@type": "Person", "name": "Rahul Tandekar", "url": "https://trailblazers.salesforce.com/profileView?u=0053A00000EzbuSQAR", "affiliation": { "@type": "Organization", "name": "Dexian India Services Pvt. Ltd" } }, "suggestedAnswer": [ { "@type": "Answer", "text": "To automatically adjust the zoom so the entire route is visible, you can use the fitBounds() method with the route’s bounds. After setting directions, add:    if (status === 'OK') {      directionsDisplay.setDirections(response);      var bounds = response.routes[0].bounds;      map.fitBounds(bounds);  }    This ensures the map zooms and centers itself to show the complete route between your two points.      Best regards,  Marie  EZTag    ", "upvoteCount": 0, "url": "https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007T4EiwSAF", "datePublished": "2026-05-25T04:45:38.000Z", "author": { "@type": "Person", "name": "Marie Wood", "url": "https://trailblazers.salesforce.com/profileView?u=005KX000004BvlZYAS", "affiliation": { "@type": "Organization", "name": "--" } } } ] } } Skip to main content
Topics#VisualforceRahul Tandekar 的问题
Rahul Tandekar (Dexian India Services Pvt. Ltd) 提问于 #Visualforce
2021年2月18日 14:25

google map adjust zoom level according to points

Hi Everyone,

 I have created a google map to show a route between 2 points

and it is working fine

but I want to set the zoom level according to these 2 points so I can see complete route 

do you have any idea how to do this

 

<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);
                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=*********************************************callback=initMap">
            </script>
        </body>
    </html>
</apex:page>

Thank You

Rahul​​​​​​​
3 个回答
  1. Marie Wood
    5月25日 04:45

    To automatically adjust the zoom so the entire route is visible, you can use the fitBounds() method with the route’s bounds. After setting directions, add:

      

    if (status === 'OK') { 

        directionsDisplay.setDirections(response); 

        var bounds = response.routes[0].bounds; 

        map.fitBounds(bounds); 

    } 

     

    This ensures the map zooms and centers itself to show the complete route between your two points. 

     

     

    Best regards, 

    Marie 

    EZTag

     

     

撰写回答...
0/9000