現在の場所と目的地が表示されない方向があります

Question

このimageを参照してください。

現在の場所を目的地に表示しようとしていますが、その方向は地図に表示されません。パネルに経路が表示されます。

navigator.geolocation.getCurrentPosition(function (position) { 
     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 
     var coords = new google.maps.LatLng(latitude, longitude); 
     var directionsService = new google.maps.DirectionsService; 
     var directionsDisplay = new google.maps.DirectionsRenderer({ 
      draggable: true, 
      map: map, 
      panel: document.getElementById('right-panel') 
     }); 
     var trafficLayer = new google.maps.TrafficLayer(); 
     var mapOptions = 
     { 
      zoom: 15, 
      center: coords 
     }; 

     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     displayRoute(directionsService, directionsDisplay); 


     function displayRoute(service, display) { 
      service.route({ 
       origin: coords, 
       destination: new google.maps.LatLng(5.409722, 100.313319), 
       provideRouteAlternatives: true, 
       travelMode: google.maps.TravelMode.DRIVING 
      }, function (response, status) { 
       if (status === google.maps.DirectionsStatus.OK) { 
        display.setDirections(response); 
       } else { 
        alert('Could not display directions due to: ' + status); 
       } 
      }); 
     } 
    }); 

地図に現在地から目的地までの方向は表示されません。

Answer 1

google.maps.DirectionsRendererを作成すると、マップは未定義です。マップの後にgoogle.maps.DirectionsRendererを作成するか、マップが定義されたら.setMapを呼び出してください。

var coords = new google.maps.LatLng(latitude, longitude); 
    var directionsService = new google.maps.DirectionsService; 
    var trafficLayer = new google.maps.TrafficLayer(); 
    var mapOptions = { 
    zoom: 15, 
    center: coords 
    }; 

    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
    draggable: true, 
    map: map, 
    panel: document.getElementById('right-panel') 
    }); 
    displayRoute(directionsService, directionsDisplay); 

proof of concept fiddle

コードスニペット：

var geocoder; 
 
var map; 
 
// [ 0 ]: Tapah, Perak, Malaysia (4.19773, 101.261529) 
 

 
function initialize() { 
 
    var latitude = 4.19773; 
 
    var longitude = 101.261529; 
 
    var coords = new google.maps.LatLng(latitude, longitude); 
 
    var directionsService = new google.maps.DirectionsService; 
 
    var trafficLayer = new google.maps.TrafficLayer(); 
 
    var mapOptions = { 
 
    zoom: 15, 
 
    center: coords 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    draggable: true, 
 
    map: map, 
 
    panel: document.getElementById('right-panel') 
 
    }); 
 
    displayRoute(directionsService, directionsDisplay); 
 

 

 
    function displayRoute(service, display) { 
 
    service.route({ 
 
     origin: coords, 
 
     destination: new google.maps.LatLng(5.409722, 100.313319), 
 
     provideRouteAlternatives: true, 
 
     travelMode: google.maps.TravelMode.DRIVING 
 
    }, function(response, status) { 
 
     if (status === google.maps.DirectionsStatus.OK) { 
 
     display.setDirections(response); 
 
     } else { 
 
     alert('Could not display directions due to: ' + status); 
 
     } 
 
    }); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div> 
 
<div id="right-panel"></div>