オートコンプリートボックスを使用したGoogleマップの運転方法

Question

車の運転ルートを示す入力フィールドが自動入力されたGoogleマップがあります。問題は、directionserviceがオートコンプリートされた変数の代わりに入力変数を使用するため、エラーが発生することです。これをどうすれば解決できますか？

デモ：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

'変更' はそれだからあなたは、代わりに '変更' イベントの 'place_changed' イベントを使用する必要があります入力が変更されるたびにトリガーされ、ユーザーがオートコンプリートから場所を選択したときにはトリガーされません。場所自体を取得することを忘れないでください。

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

その後、calculateAndDisplayRoute機能に：

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

私はautocomple .getPlace().geometry.locationだけでなく、良い作品別のイベントハンドラgoogle.maps.event.addListener(start, 'place_changed', onChangeHandler1);を使用しました。あなたは、この上のGoogle MapsのAPIを複数回含まれている」：コードスタイルは非常に良いではありません、最初にすべてのことを解決し、

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); 
 
         } 
 
        }); 
 
     
 
     
 
       } 
 
      })();