地図を使わずにgoogle maps apiで方向を取得

Question

こんにちは私はバックエンドを持たないフロントエンドプロジェクトで遊んでいて、特定の場所から別の場所への通過方向を取得したいと考えています。

問題は私が持っていることは、ブラウザのためのGoogleマップapiは、私が正しい場合は常にマップを使用する必要があります。

このバス停からは、たとえば次の3つのバスを見たいだけです。

これは、さまざまなことに関するドキュメントが多すぎて、どのAPIを使用するのか不明です。サーバーAPIを使用できますか？

誰も私を助けることができる任意のGoogleのAPIのプロですか？

ありがとうございました！

Answer 1

地図は必要ありません。 Google Maps Javascript API v3 DirectionsServiceは、「パネル」（HTML div）にテキストの方向を表示するだけです。 the documentationから

：

setPanel（パネル：ノード）|戻り値：なし このメソッドは、aの方向を描画します。パネルからコンテンツを削除するには、nullを渡します。

コードスニペット：（this example in the documentationから変更）

function initMap() { 
 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
 
    var directionsService = new google.maps.DirectionsService; 
 

 
    directionsDisplay.setPanel(document.getElementById('right-panel')); 
 

 
    var onChangeHandler = function() { 
 
    calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
    }; 
 
    document.getElementById('start').addEventListener('change', onChangeHandler); 
 
    document.getElementById('end').addEventListener('change', onChangeHandler); 
 
    calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
} 
 

 
function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
 
    var start = document.getElementById('start').value; 
 
    var end = document.getElementById('end').value; 
 
    directionsService.route({ 
 
    origin: start, 
 
    destination: end, 
 
    travelMode: google.maps.TravelMode.TRANSIT 
 
    }, function(response, status) { 
 
    if (status === google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="floating-panel"> 
 
    <strong>Start:</strong> 
 
    <select id="start"> 
 
    <option value="chicago, il">Chicago</option> 
 
    <option value="st louis, mo">St Louis</option> 
 
    <option value="joplin, mo">Joplin, MO</option> 
 
    <option value="oklahoma city, ok">Oklahoma City</option> 
 
    <option value="amarillo, tx">Amarillo</option> 
 
    <option value="gallup, nm">Gallup, NM</option> 
 
    <option value="flagstaff, az">Flagstaff, AZ</option> 
 
    <option value="winona, az">Winona</option> 
 
    <option value="kingman, az">Kingman</option> 
 
    <option value="barstow, ca">Barstow</option> 
 
    <option value="san bernardino, ca">San Bernardino</option> 
 
    <option value="los angeles, ca">Los Angeles</option> 
 
    </select> 
 
    <br> 
 
    <strong>End:</strong> 
 
    <select id="end"> 
 
    <option value="chicago, il">Chicago</option> 
 
    <option value="st louis, mo" selected="selected">St Louis</option> 
 
    <option value="joplin, mo">Joplin, MO</option> 
 
    <option value="oklahoma city, ok">Oklahoma City</option> 
 
    <option value="amarillo, tx">Amarillo</option> 
 
    <option value="gallup, nm">Gallup, NM</option> 
 
    <option value="flagstaff, az">Flagstaff, AZ</option> 
 
    <option value="winona, az">Winona</option> 
 
    <option value="kingman, az">Kingman</option> 
 
    <option value="barstow, ca">Barstow</option> 
 
    <option value="san bernardino, ca">San Bernardino</option> 
 
    <option value="los angeles, ca">Los Angeles</option> 
 
    </select> 
 
</div> 
 
<div id="right-panel"></div>