2つの入力ボックスからGoogle Maps APIまでの距離

Question

最新のAPIを使用して2つの異なる緯度/経度のポイントを自動入力してGoogle Mapsにプロットした入力ボックスを使用するにはどうすればよいですか？

私がこれまで

var data = { 
    "LAX": { 
     "t": "33.9416", 
     "g": "118.4085", 
     "n": "Los Angeles International Airport" 
    }, 
     "JFK": { 
     "t": "40.6413", 
     "g": "73.7781", 
     "n": "John F. Kennedy International Airport" 
    }, 
     "BWI": { 
     "t": "39.1774", 
     "g": "76.6684", 
     "n": "Baltimore–Washington International Airport" 
    } 
}; 

function getAirports() { 
    var arr = []; 
    for (airport in data) { 
     if (data.hasOwnProperty(airport)) { 
      arr.push(airport + " - " + data[airport].n); 
     } 
    } 
    window.console&&console.log(arr); 
    return arr; 
} 
$("#origin").autocomplete({ 
    source: getAirports(), 
    select: function (event, ui) { 
     var value = ui.item.value; 
     var airport = data[value.split(" -")[0]]; 
     $("#output1").html(value+"<br>t:"+airport.t+"<br>t:"+airport.g); 
    } 
}); 
$("#destination").autocomplete({ 
    source: getAirports(), 
    select: function (event, ui) { 
     var value = ui.item.value; 
     var airport = data[value.split(" -")[0]]; 
     $("#output2").html(value+"<br>t:"+airport.t+"<br>t:"+airport.g); 
    } 
}); 

下のJSを持っていると私は、2つの場所があることをするための最良の方法は何

<div class="ui-widget"> 
    <label for="origin">Origin:</label> 
    <input id="origin"> 
</div> 
    <div id="output1"></div> 

<div class="ui-widget"> 
    <label for="destination">Destination:</label> 
    <input id="destination"> 
</div> 
    <div id="output2"></div> 
<input type="submit" value="Submit"> 

下のHTMLに出発地と目的地の入力ボックスがあるとし送信ボタンでをクリックしてGoogle Maps API にプロットしますか？

おかげ

編集：

私はhereを使用行き方例のような例hereか何かに実装されています距離行列のAPIを使用するかしたい

が、私は本当にそれらのいずれかを実装する方法がわかりません使用したい入力ボックスを使用してください。

Answer 1

これらの場所の間で方向サービスを検索することはできません（関連付けられた名前の経度に間違った記号が表示されます）。

マップを作成してルートを追加する場合は、コードを書く必要があります（example in the documentation is a good starting place）。

proof of concept fiddle

コードスニペット：

var geocoder; 
 
var map; 
 
var originCoords; 
 
var destCoords; 
 
var markerOrigin, markerDest; 
 
var directionsService; 
 
var directionsDisplay; 
 

 
function initialize() { 
 
    directionsService = new google.maps.DirectionsService; 
 
    directionsDisplay = new google.maps.DirectionsRenderer; 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    directionsDisplay.setMap(map); 
 
    $("#origin").autocomplete({ 
 
    source: getAirports(), 
 
    select: function(event, ui) { 
 
     var value = ui.item.value; 
 
     var airport = data[value.split(" -")[0]]; 
 
     $("#output1").html(value + "<br>t:" + airport.t + "<br>g:" + airport.g); 
 
     originCoords = new google.maps.LatLng(parseFloat(airport.t), parseFloat(airport.g)); 
 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
    } 
 
    }); 
 
    $("#destination").autocomplete({ 
 
    source: getAirports(), 
 
    select: function(event, ui) { 
 
     var value = ui.item.value; 
 
     var airport = data[value.split(" -")[0]]; 
 
     $("#output2").html(value + "<br>t:" + airport.t + "<br>g:" + airport.g); 
 
     destCoords = new google.maps.LatLng(parseFloat(airport.t), parseFloat(airport.g)); 
 
     calculateAndDisplayRoute(directionsService, directionsDisplay) 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var data = { 
 
    "LAX": { 
 
    "t": "33.9416", 
 
    "g": "-118.4085", 
 
    "n": "Los Angeles International Airport" 
 
    }, 
 
    "JFK": { 
 
    "t": "40.6413", 
 
    "g": "-73.7781", 
 
    "n": "John F. Kennedy International Airport" 
 
    }, 
 
    "BWI": { 
 
    "t": "39.1774", 
 
    "g": "-76.6684", 
 
    "n": "Baltimore–Washington International Airport" 
 
    } 
 
}; 
 

 
function getAirports() { 
 
    var arr = []; 
 
    for (airport in data) { 
 
     if (data.hasOwnProperty(airport)) { 
 
     arr.push(airport + " - " + data[airport].n); 
 
     } 
 
    } 
 
    window.console && console.log(arr); 
 
    return arr; 
 
    } 
 
    // from https://developers.google.com/maps/documentation/javascript/examples/directions-simple 
 

 
function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
 
    if ((originCoords instanceof google.maps.LatLng) && (destCoords instanceof google.maps.LatLng)) { 
 
    if (!markerOrigin || !markerOrigin.setPosition) { 
 
     markerOrigin = new google.maps.Marker({ 
 
     map: map, 
 
     position: originCoords 
 
     }) 
 
    } else { 
 
     markerOrigin.setPosition(originCoords) 
 
    } 
 
    if (!markerDest || !markerDest.setPosition) { 
 
     markerDest = new google.maps.Marker({ 
 
     map: map, 
 
     position: destCoords 
 
     }) 
 
    } else { 
 
     markerDest.setPosition(destCoords) 
 
    } 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    bounds.extend(originCoords); 
 
    bounds.extend(destCoords); 
 
    map.fitBounds(bounds); 
 

 
    directionsService.route({ 
 
     origin: originCoords, 
 
     destination: destCoords, 
 
     travelMode: google.maps.TravelMode.DRIVING 
 
    }, function(response, status) { 
 
     if (status === google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
     } 
 
    }); 
 
    } 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div class="ui-widget"> 
 
    <label for="origin">Origin:</label> 
 
    <input id="origin"> 
 
</div> 
 
<div id="output1"></div> 
 

 
<div class="ui-widget"> 
 
    <label for="destination">Destination:</label> 
 
    <input id="destination"> 
 
</div> 
 
<div id="output2"></div> 
 
<input type="submit" value="Submit"> 
 
<div id="map_canvas"></div>