0

I am currently worked with google-map project to allow the users can check the route by entering the origin and destination. I'm not sure where I should start with, any helps will be appreciated. This is my first time to use the google-map API in my project.

<body>
    <div id="floating-panel">
        <b>Start: </b>
        <select id="start">
            <option value="chicago, il">Chicago</option>
            <option value="st louis, mo">St Louis</option>
            <option value="joplin, mo">Joplin, MO</option>
        </select>
        <b>End: </b>
        <select id="end">
            <option value="chicago, il">Chicago</option>
            <option value="st louis, mo">St Louis</option>
            <option value="joplin, mo">Joplin, MO</option>
        </select>
    </div>
    <div id="map"></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: 41.85, lng: -87.65}
            });
            directionsDisplay.setMap(map);

            var onChangeHandler = function () {
                calculateAndDisplayRoute(directionsService, directionsDisplay);
            };
            document.getElementById('start').addEventListener('change', onChangeHandler);
            document.getElementById('end').addEventListener('change', onChangeHandler);
        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay) {
            directionsService.route({
                origin: document.getElementById('start').value,
                destination: document.getElementById('end').value,
                travelMode: 'DRIVING'
            }, function (response, status) {
                if (status === 'OK') {
                    directionsDisplay.setDirections(response);
                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });
        }
    </script>
     //API Key here
</body>

Wen Jin TIng
  • 47
  • 2
  • What problem are you having with the posted code? It works for me ([fiddle](https://jsfiddle.net/geocodezip/mzL508cs/3/)). – geocodezip May 21 '19 at 17:47
  • basically the codes are worked fine, but I want to change it to like allow the user to enter 2 different destination instead of preset option and I read through all the documentation, but can't find any solution for it – Wen Jin TIng May 21 '19 at 17:53
  • Change the `` elements. – geocodezip May 21 '19 at 18:00
  • I tried it before, but seem like it need to enter the exactly same name to match with the destination since it doesn't pop up and suggest box – Wen Jin TIng May 21 '19 at 18:16
  • If you want autocomplete on those inputs, you need to implement it. – geocodezip May 21 '19 at 18:28
  • Thanks man, I think autocomplete is what I need to consider about it. Regards. – Wen Jin TIng May 21 '19 at 18:38
  • related question; [google maps autocomplete with dynamic arrays](https://stackoverflow.com/questions/40371567/google-maps-autocomplete-with-dynamic-arrays) – geocodezip May 21 '19 at 21:41
  • related question: [How to get the distance between two locations from a users input](https://stackoverflow.com/questions/50099196/how-to-get-the-distance-between-two-locations-from-a-users-input) – geocodezip May 21 '19 at 21:51

0 Answers0