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 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​​​​​​​
Baya AdamBaya Adam
My Articles is a writer’s community where writers can share their stories all over the world. Signup and share your stories to all over the world. Follow your favorite writers, create groups, forums, chat, and much much more!