html - Can't get Google Directions API to work properly (Javascript)

Question

I'm working on the backend of a website and I want the map, on a specific page, to display the route between two locations.

I've arranged a Google API key to use the service and the map is rendered just fine, the problem is it doesn't display any route, it only displays the map in general, here's my code:

    <div class="map-responsive">
        <div id="map" class="col-lg-10"></div>
    </div>

    <script>
        function initMap() {
            var directionsService = new google.maps.DirectionsService;
            var directionsDisplay = new google.maps.DirectionsRenderer;
            var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: {lat: 37.1513841, lng: -8.1198707}
            });
            directionsDisplay.setMap(map);

        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
            directionsService.route({
            origin: 'Lisboa',
            destination: 'Porto',
            travelMode: 'DRIVING'
            }, function(response, status) {
            if (status === 'OK') {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
            });
        }

    </script>
    <script asyn defer
        src="https://maps.googleapis.com/maps/api/js?key=API_KEY_CENSORED_FOR_STACKOVERFLOW&callback=initMap">
    </script>

I've set the "origin" and "destination" to two portuguese cities just for testing, below is the output of the map, with no errors on the browsers console

Output for Maps API

And also, how can I set the "center" and the "zoom" to be dynamic? The output is supposed to be centered on the route between the two locations and not on a fixed zoom nor location in specific,

Thanks in advane!

question from:https://stackoverflow.com/questions/65925905/cant-get-google-directions-api-to-work-properly-javascript

Answer 1

Waitting for answers