道順を教えてください。

Question

私はレストランの場所を表示するためにwebsite which includes a mapを作成していますが、サイト上に機能を追加して、モバイル上でレストランの場所と表示になっている場合に、ユーザーが地理的位置または現在地からの道順を取得するためのボタンを選択できるようにしたいそれはページ上にあります。マップの

私のモックアップはそうのようなものです：

<main role="main" class="container bg-content"> 
    <h1 class="head-font text-center">Where are we</h1> 

    <div class="row margin"> 
     <div class="col"> 
      <div id="map"></div> 
      <script> 
       function initMap() { 
       var restaurant = {lat: 54.772373, lng: -6.526826}; 
       var options = { 
        zoom: 14, 
        center: restaurant, 
        disableDoubleClickZoom: true, 
        draggable: true, 
        fullscreenControlOptions: true 
       }; 

       var map = new google.maps.Map(document.getElementById('map'), options); 

       var contentString = '<div class="col">' + 
             '<div class="row">' + 
              '<h1><p style="padding-left: 20px;">Our location</p></h1>' + 
             '</div>' + 
             '<div class="col">' + 
              '<div class="row"' + 
               '<p>116 Hillhead Rd, Castledawson, Magherafelt, BT45 8ET</p>' + 
              '</div>' + 
              '<div class="row"' + 
               '<h2 class="active-item">Phone us: </h2>' + 
               '<p style="padding-left: 5px;"><a href="tel:028 7946 8322"> 028 7946 8322</a></p>' + 
              '</div>' + 
             '</div>' + 
            '</div>'; 


       var infowindow = new google.maps.InfoWindow({ 
        content: contentString 
       }); 

       var marker = new google.maps.Marker({ 
        position: restaurant, 
        map: map, 
        maxWidth: 400, 
        title: 'The Old Thatch Inn' 
       }); 

       marker.addListener('click', function() { 
        infowindow.open(map, marker); 
       }); 
      } 
      </script> 
      <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkSyByeAjemiEXbWMY5RNJg5lHlbeC5Z4&callback=initMap"> 
      </script>  
     </div> 
    </div> 

    <div class="row margin"> 
     <div class="col"> 
      <button type="button" class="btn btn-info btn-sm">Get directions to us</button> 
     </div> 
    </div> 
</main> 

私は、これで物事に取り掛かるする方法はただわからないのJavascriptに新しいですし、それの基本を知っています。どんな助けや指導も感謝しています。方向は地図そのものの下に表示されます

Answer 1

GoogleマップのDirectionサービスへのインスタンスを作成します。オブジェクトのパスは、開始、終了、移動モード、通過オプションなどです。マップを使用してルートをレンダリングします。

function callBack (r){ 
       var renderer = new google.maps.DirectionsRenderer(); 
       renderer.setMap(map); 
       renderer.setDirections(r); 
} 
var directionService = new google.maps.DirectionsService() 
directionService.route({origin: start,//Geolocation of the user 
        destination: restaurant, 
        travelMode: google.maps.DirectionsTravelMode.TRANSIT, 
        transitOptions: { modes: [google.maps.TransitMode.BUS] } 
       },callBack);