Google Maps APIを利用して、２点間の距離を取得します。
前準備として、「libraries=geometry」のパラメータ付でGoogle Maps APIを読み込む必要があります。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&key=xxxxxxxxxx"></script>
２点間の距離の取得には、
google.maps.geometry.spherical.computeDistanceBetween(from, to)
を使用します。
fromには始点の緯度・経度情報、toには終点の緯度・経度情報を、Google MapsのlatLngオブジェクトで指定します。
緯度・経度情報の取得方法は、前回の記事「
【住所⇔緯度・経度】位置情報の相互変換」を参考にしてください。
【サンプル１ソース】
２点間の距離を取得
<div>
地点１：<input type="text" id="addressInput1" value="大坂城" style="width: 200px">
<br />
地点２：<input type="text" id="addressInput2" value="道頓堀戎橋" style="width: 200px">
<br />
<input type="button" value="距離取得" onclick="getDistance();">
<br /><br />
★結果★<br />
<input type="text" id="distanceInfo" style="width: 250px">
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&key=xxxxxxxxxx"></script>
<!--「key=xxxxxxxxxx」にはGoogleで取得したAPIキーを記述します -->
<script type="text/javascript">
var latLng = new Array(); //緯度・経度情報
var result = new Array(); //取得結果
var timerId; //タイマーID
//距離取得
function getDistance() {
latLng = new Array(2);
result = new Array(2);
document.getElementById("distanceInfo").value = "";
//地点１の緯度・経度取得
getIdoKeido(1);
//地点２の緯度・経度取得
getIdoKeido(2);
//緯度・経度取得は非同期処理のため、取得結果をタイマーでチェック
timerId = setInterval(function(){
if (result[1] == false || result[2] == false) {
//緯度・経度取得失敗
clearInterval(timerId);
return;
}
if (latLng[1] != undefined && latLng[2] != undefined) {
//地点１と地点２の緯度・経度取得成功
//★２点間の距離を取得
var distance = google.maps.geometry.spherical.computeDistanceBetween(latLng[1], latLng[2]) / 1000;
document.getElementById("distanceInfo").value = distance.toFixed(3) + "km";
clearInterval(timerId);
}
}, 100);
}
//緯度・経度取得
function getIdoKeido(point) {
var addressInput = document.getElementById('addressInput' + point).value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
{
address: addressInput
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//緯度・経度取得成功
//latLngオブジェクト（緯度・経度情報）を保存
latLng[point] = results[0].geometry.location;
result[point] = true;
}
else {
//緯度・経度取得失敗
alert(addressInput + "：住所が見つかりませんでした。");
result[point] = false;
}
});
}
</script>