Wie gibt man eine Wegbeschreibung?

Question

Ich erstelle eine website which includes a map, um den Standort des Restaurants anzuzeigen, jedoch möchte ich Funktionalität auf der Website hinzufügen, die den Benutzer eine Schaltfläche auswählen kann, um Wegbeschreibungen von ihrem Standort oder aktuellen Standort wenn auf dem Handy zum Restaurant Standort und anzuzeigen es auf der Seite.

Meine Mock-up von der Karte ist wie folgt:

<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> 

Ich bin neu in Javascript und kennen die Grundlagen davon, nur nicht sicher, wie die Dinge mit diesem zu gehen. Jede Hilfe oder Anleitung wird geschätzt. Die Richtungen werden unter der Karte selbst angezeigt werden

Answer 1

Erstellen Sie eine Instanz für den Dienst Richtung in Google Maps Objekt übergeben in den Parametern sagen Start, Ende, Reisemodi und Transit-Optionen.Verwenden Sie dann ein Render, um die Route in der Karte zu rendern.

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);