Googleマップで地図上のすべての目的地マーカーを表示していない、最初と最後だけ

Question

すべてのマーカーで経路を正しく表示するGoogleマップがあります。宛先がハードでコーディングされている https://jsfiddle.net/az5tk8ns/17/

： destinations = ["", "durban,KZN", " ixpop,kzn"]

私はその後、私のアドレスの配列を生成し、別の機能があります。

var addresses = []; 
addresses.push('Durban, KZN'); 
addresses.push('izopo, KZN');` 

を私はその後設定：

destinations = addresses 

https://jsfiddle.net/az5tk8ns/19/

これを行うと、地図には出発地と目的地のマーカーのみが表示され、途中で停止することはありません。

ダイナミックに生成された住所の配列をGoogleマップに渡して、旅の各ポイントを表示できるようにするには、この方法をどのように使用できますか？

完全なGoogleマップ構文：いつものように

$(document).ready(function() { 


var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
var distancearray=[]; 
var addresses = []; 
addresses.push('Durban, KZN'); 
addresses.push('izopo, KZN'); 

warehouse='ladysmith, kwa zulu natal'; 


function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(-28.5710903, 26.0826083); 
    var mapOptions = { 
    zoom: 7, 
    center: chicago 
    }; 
    map = new google.maps.Map(document.getElementById('route_map_canvas'), mapOptions); 
    directionsDisplay.setMap(map); 
    calcRoute(); 
} 
var origin = "johannesburg", 
    destinations = addresses 

service = new google.maps.DistanceMatrixService(); 

function calcRoute() { 
    var waypts = []; 
    for (var i = 1; i < destinations.length - 1; i++) { 
    waypts.push({ 
     location: destinations[i], 
     stopover: true 
    }); 
    } 
    var request = { 
    origin: origin, 
    destination: destinations[destinations.length - 1], 
    waypoints: waypts, 
    optimizeWaypoints: true, 
    travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     var orig = document.getElementById("orig"), 
     dest = document.getElementById("dest"), 
     dist = document.getElementById("dist"); 

     orig.value = response.routes[0].legs[0].start_address; 
     dest.value = response.routes[0].legs[0].end_address; 
     var total_distance = 0.0; 
     for (var i = 0; i < response.routes[0].legs.length; i++) { 
     total_distance += response.routes[0].legs[i].distance.value; 
     distancearray.push([response.routes[0].legs[i].distance.value]); 
     //alert(distancearray); 
     } 
     dist.value = total_distance + " meters"; 
    } 
    }); 

} 
    initialize(); 

}) 

おかげで、

あなたが開始と終了として使用されている destinations変数で唯一の2つの宛先があることを除いて、正しいすべてを行っている

Answer 1

。 calcRoute()関数のdirectionsRequestオブジェクトにはゼロウェイポイントがあります。 これは中間的な中間点が得られないため、マーカーがないためです。

これを参照してくださいaddresses変数（行番号11）にもう1つの場所をプッシュし、マップ上に正しく表示されています。updated Fiddle

いつでもconsole.log(request);を実行して、どのリクエストオブジェクトをGoogleに渡すかを確認できます。