Googleの場所と道順API

Question

私は宅配便の電卓を使って、ある場所から別の場所に荷物を配達するための費用を計算していますが、この機能は動作していますが、私はGoogleの場所オートコンプリートAPIを自動的に追加したい開始位置と終了位置の入力フィールド。

https://jsfiddle.net/1k8035gt/

var directionDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 

function initialize() { 
directionsDisplay = new google.maps.DirectionsRenderer(); 
var northampton = new google.maps.LatLng(52.2405, 0.9027); 
var myOptions = { 
zoom: 12, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
center: northampton 
} 

    map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 
    directionsDisplay.setMap(map); 
    } 

    function calcRoute() { 
    var start    = document.getElementById("start").value; 
    var end    = document.getElementById("end").value; 
    var distanceInput  = document.getElementById("distance"); 
    var distanceInputMiles = document.getElementById("distance_miles"); 
    var roundtripInput  = document.getElementById("round_trip_miles"); 
    var finalcostInput  = document.getElementById("finalcost"); 
    var billableInput  = document.getElementById("billable_miles"); 
    var unitsInput   = document.getElementById("units"); 
    var travelCostInput = document.getElementById("travel_cost"); 
    var parcelweight  = $("#parcel_weight").val(); 
    var additions   = 0; 

    //DEFINE MY VARS 
    if ($("#van_type").val() == 'SMALL') { 
    additions+=5; 
    console.log(additions); 
    } 
if ($("#van_type").val() == 'SWB') { 
    additions+=10; 
    console.log(additions); 
    } 
    if ($("#van_type").val() == 'LWB') { 
    additions+=15; 
    console.log(additions); 
    } 
if ($("#van_type").val() == 'XLWB') { 
    additions+=20; 
    console.log(additions); 
    } 


    console.log(parcelweight); 


    var request = { 
    origin: start, 
    destination: end, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 


directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 
    var distance_km   = response.routes[0].legs[0].distance.value/
    1000 
    var distance_mi   = Math.round(distance_km * 0.6214); 
    var roundtrip   = distance_mi * 2; 
    var finalcost   = additions + roundtrip; 
    distanceInputMiles.value = distance_mi; 
    roundtripInput.value  = roundtrip; 
    finalcostInput.value  = finalcost; 
    } 
    }); 
    } 

    initialize(); 

：

私はGoogleのスクリプト要求に場所のキーを追加しようとしたが、しかし、それはアプリケーション全体

これは単にGoogleの方向のAPIやアプリJSとフィドルですがクラッシュ

Answer 1

最初に、場所を「オートコンプリート」する入力を宣言する必要があります。 宣言は非常に単純です：var autocomplete = new google.maps.places.Autocomplete(yourInput);。

次に、マップやインターフェイス、オートコンプリート入力を操作できるリスナーを追加する必要があります。ここで宣言はあまりにも非常に簡単です：

autocomplete.addListener('place_changed', function() { 
     infowindow.close(); 
     var place = autocomplete.getPlace(); 
     if (!place.geometry) { 
      window.alert("Veuillez sélectionner un choix dans la liste."); 
      return; 
     } 

     // Do what ever you want like: 

     map.setCenter(place.geometry.location); 

} 

注：あなたは結果のフォーマットのドキュメントhereを参照してくださいすることができます。

また、オートコンプリートに関するgoogleのドキュメントを参照することもできます。

最後に、あなたのコードは次のようになります必要があります。

var directionDisplay; 
 
var directionsService = new google.maps.DirectionsService(); 
 
var map; 
 

 
function initialize() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var northampton = new google.maps.LatLng(52.2405, 0.9027); 
 
    var myOptions = { 
 
    zoom: 12, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: northampton 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    directionsDisplay.setMap(map); 
 
    
 
    var startInput = /** @type {!HTMLInputElement} */(document.getElementById('start')); 
 
    var startAutocomplete = new google.maps.places.Autocomplete(startInput); 
 
     
 
    startAutocomplete.addListener('place_changed', function() { 
 
    var place = startAutocomplete.getPlace(); 
 
    if (!place.geometry) { 
 
     window.alert("Veuillez sélectionner un choix dans la liste."); 
 
     return; 
 
    } 
 

 
    map.setCenter(place.geometry.location); 
 
    }); 
 
    
 
    var endInput = /** @type {!HTMLInputElement} */(document.getElementById('end')); 
 
    var endAutocomplete = new google.maps.places.Autocomplete(endInput); 
 
     
 
    endAutocomplete.addListener('place_changed', function() { 
 
    var place = endAutocomplete.getPlace(); 
 
    if (!place.geometry) { 
 
     window.alert("Veuillez sélectionner un choix dans la liste."); 
 
     return; 
 
    } 
 

 
    map.setCenter(place.geometry.location); 
 
    }); 
 
    
 
     
 
    
 
} 
 

 
function calcRoute() { 
 
    var start    = document.getElementById("start").value; 
 
    var end    = document.getElementById("end").value; 
 
    var distanceInput  = document.getElementById("distance"); 
 
    var distanceInputMiles = document.getElementById("distance_miles"); 
 
    var roundtripInput  = document.getElementById("round_trip_miles"); 
 
    var finalcostInput  = document.getElementById("finalcost"); 
 
    var billableInput  = document.getElementById("billable_miles"); 
 
    var unitsInput   = document.getElementById("units"); 
 
    var travelCostInput = document.getElementById("travel_cost"); 
 
    var parcelweight  = $("#parcel_weight").val(); 
 
    var additions   = 0; 
 
    
 
    //DEFINE MY VARS 
 
    if ($("#van_type").val() == 'SMALL') { 
 
     additions+=5; 
 
     console.log(additions); 
 
     } 
 
    if ($("#van_type").val() == 'SWB') { 
 
     additions+=10; 
 
     console.log(additions); 
 
     } 
 
    if ($("#van_type").val() == 'LWB') { 
 
     additions+=15; 
 
     console.log(additions); 
 
     } 
 
    if ($("#van_type").val() == 'XLWB') { 
 
     additions+=20; 
 
     console.log(additions); 
 
     } 
 
    
 
    
 
    console.log(parcelweight); 
 
    
 
    
 
    var request = { 
 
    origin: start, 
 
    destination: end, 
 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
    }; 
 
    
 

 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     var distance_km   = response.routes[0].legs[0].distance.value/1000 
 
     var distance_mi   = Math.round(distance_km * 0.6214); 
 
     var roundtrip   = distance_mi * 2; 
 
     var finalcost   = additions + roundtrip; 
 
     distanceInputMiles.value = distance_mi; 
 
     roundtripInput.value  = roundtrip; 
 
     finalcostInput.value  = finalcost; 
 
    } 
 
    }); 
 
} 
 

 
initialize();

#map_canvas { 
 
    height: 300px; 
 
} 
 
input { 
 
    margin-bottom: 1em; 
 
}

<div> 
 
    <p> 
 
    <label for="start">Start: </label> 
 
    <input type="text" name="start" id="start" /> 
 
    <br/> 
 
    <label for="end">End: </label> 
 
    <input type="text" name="end" id="end" /> 
 
    <br/> 
 
    <label for="van_type">Parcel Weight: </label> 
 
    <select id="van_type"> 
 
     <option value="SMALL">Small Van (Upto 400KG)</option> 
 
     <option value="SWB"Transit SWB Van (Upto 850KG)</option> 
 
     <option value="LWB">LWB Van (Upto 1300KG)</option> 
 
     <option value="XLWB">XLWB Van (Upto 1150KG)</option> 
 
    </select> 
 
    <br/><br/> 
 
    <input type="submit" value="Calculate Route" onclick="calcRoute()" /> 
 
    </p> 
 
    <p> 
 
    
 
    <label for="distance">Distance (mi): </label> 
 
    <input type="text" id="distance_miles" readonly="true" /> 
 
    
 
    <label for="distance">Round Trip (mi): </label> 
 
    <input type="text" id="round_trip_miles" readonly="true" /> 
 
    
 
    <label for="finalcost">Final cost £: </label> 
 
    <input type="text" id="finalcost" readonly="true" /> 
 
    </p> 
 
</div> 
 
<div id="map_canvas"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAdFqcFgkBXdekUDy_R_czpgHLRPoVwmQ&libraries=places"></script> 
 
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

注：私はオートコンプリートライブラリのコールバックを変更。オートコンプリートを初期化する関数は必要ありません。私はそれを初期化して関数initializeに入れます。