Wegbeschreibungen auf Google Maps mit Autocomplete-Boxen

Question

Ich habe eine Google-Map mit Autocomplete-Eingabefeldern, die Wegbeschreibungen anzeigt. Problem ist, dass ich Fehler bekommen habe, weil der directionservice die Input-Variable anstelle der Autovervollständigen-Variable verwendet. Wie kann ich das beheben?

Demo: http://touristification.com/reisadvies/routekaart.html

<div id="map"></div> 
<script> 
var placeSearch, autocomplete, autocomplete2; 



     google.maps.event.addDomListener(window, 'load', initMap); 

    function initMap() { 

    var input1 = document.getElementById('locationTextField'); 
    var start = new google.maps.places.Autocomplete(input1); 


    var input2 = document.getElementById('locationTextField2'); 
    var end = new google.maps.places.Autocomplete(input2);  

    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: 52.34, lng: 4.87} 
    }); 
    directionsDisplay.setMap(map); 
    var geocoder = new google.maps.Geocoder; 
    var onChangeHandler = function() { 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 

    }; 
    document.getElementById('locationTextField').addEventListener('change', onChangeHandler); 
    document.getElementById('locationTextField2').addEventListener('change', onChangeHandler); 
    } 


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




    } 
</script> 

Answer 1

Sie die 'place_changed' Ereignis statt einer 'Änderung' Ereignis verwenden sollte, da die 'Veränderung' es ist wird jedes Mal ausgelöst, wenn sich die Eingabe ändert, und nicht, wenn der Benutzer einen Ort aus der automatischen Vervollständigung auswählt und tut Nicht vergessen, den Platz selbst zu bekommen.

google.maps.event.addListener(start, 'place_changed',function(){ 
    var from = start.getPlace(); 
    // the rest of the code 
}); 

Dann wird auf der calculateAndDisplayRoute Funktion:

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

Answer 2

I verwendet autocomple .getPlace().geometry.location sowie verschiedene Event-Handler google.maps.event.addListener(start, 'place_changed', onChangeHandler1);, das besser funktioniert. Code-Stil ist nicht sehr gut, war in Eile

http://codepen.io/bora-89/pen/bwJoNY

(function() { 
 
       var placeSearch, autocomplete, autocomplete2; 
 
     
 
     
 
       google.maps.event.addDomListener(window, 'load', initMap); 
 
     
 
       function initMap() { 
 
        var input1 = document.getElementById('locationTextField'); 
 
        var start = new google.maps.places.Autocomplete(input1); 
 
     
 
     
 
        var input2 = document.getElementById('locationTextField2'); 
 
        var end = new google.maps.places.Autocomplete(input2); 
 
     
 
        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: 52.34, lng: 4.87} 
 
        }); 
 
        directionsDisplay.setMap(map); 
 
        var geocoder = new google.maps.Geocoder; 
 
        var startLoc, endLoc; 
 
        var onChangeHandler1 = function() { 
 
         startLoc = this.getPlace().geometry.location; 
 
         if (startLoc && endLoc) { 
 
          calculateAndDisplayRoute(directionsService, 
 
            directionsDisplay, 
 
            startLoc, 
 
            endLoc 
 
          ); 
 
         } 
 
        }; 
 
        var onChangeHandler2 = function() { 
 
         endLoc = this.getPlace().geometry.location; 
 
         if (endLoc && startLoc) { 
 
          calculateAndDisplayRoute(directionsService, 
 
            directionsDisplay, 
 
            startLoc, 
 
            endLoc 
 
          ); 
 
         } 
 
        }; 
 
        google.maps.event.addListener(start, 'place_changed', onChangeHandler1); 
 
        google.maps.event.addListener(end, 'place_changed', onChangeHandler2); 
 
     
 
       } 
 
     
 
     
 
       function calculateAndDisplayRoute(directionsService, directionsDisplay, startLoc, endLoc) { 
 
        console.log(startLoc); 
 
        console.log(endLoc); 
 
        directionsService.route({ 
 
         origin: startLoc, 
 
         destination: endLoc, 
 
         travelMode: 'DRIVING' 
 
        }, function (response, status) { 
 
         if (status === 'OK') { 
 
          directionsDisplay.setDirections(response); 
 
         } else { 
 
          window.alert('Directions request failed due to ' + status); 
 
         } 
 
        }); 
 
     
 
     
 
       } 
 
      })();