javascriptを使用してGoogleマップの複数のマーカー間にルートマップを描画する

Question

Googleマップを使用してマップを開発しました。マーカーは適切なラベルで表示されます。しかし、どのようにして複数のマーカーの間に経路を描くことができますか？私は混乱しています、誰でも助けることができますか？

のGoogleマップの画像：（userhistory.js）は

var \t marker = []; 
 
\t \t \t \t \t \t $("#map").show(); 
 
\t \t \t \t   \t map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t \t  \t \t \t zoom: 10, 
 
\t \t \t  \t \t  center: new google.maps.LatLng(17.7254567, 83.3097112), 
 
\t \t \t  \t \t  mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t \t  \t \t }); 
 

 
\t \t \t \t   \t directionsDisplay.setMap(map); 
 
\t \t \t  var infowindow = new google.maps.InfoWindow(); 
 
\t \t \t  var i; 
 
\t \t \t \t 
 
\t \t \t  for (i = 0; i < response.length; i++) { 
 
\t \t \t  \t 
 
\t \t \t \t  marker = new google.maps.Marker({ 
 
\t \t \t   position: new google.maps.LatLng(response[i].latitude, response[i].longitude), 
 
\t \t \t   map: map, 
 
\t \t \t   label: response[i].count 
 
\t \t \t  \t }); 
 

 
\t \t \t  \t google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
\t \t \t   return function() { 
 
\t \t \t   infowindow.setContent("Name :"+response[i].name+","+"<br>"+"Date & Time :"+response[i].date+", "+response[i].time+","+"<br>"+"Location :"+response[i].address); 
 
\t \t \t   infowindow.open(map, marker); 
 
\t \t \t   } 
 
\t \t \t  })(marker, i)); 
 
\t \t \t }

Answer 1

以下のよう ​​

JSファイルのコードがあるあなたは、あなたのマーカーを使用するために、ここでサンプルをたどることができますルートを生成するためのウェイポイントとして。

https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints

var marker = []; 
$("#map").show(); 
map = new google.maps.Map(document.getElementById('map'), { 
zoom: 10, 
center: new google.maps.LatLng(17.7254567, 83.3097112), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 

directionsDisplay = new google.maps.DirectionsRenderer(); 
directionsDisplay.setMap(map); 

var startPoint; 
var endPoint; 
var waypts = []; 

var infowindow = new google.maps.InfoWindow(); 
var i; 

for (i = 0; i < response.length; i++) {  
marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(response[i].latitude, response[i].longitude), 
    map: map, 
    label: response[i].count 
}); 

if (i == 0) { 
    startPoint = new google.maps.LatLng(response[i].latitude, response[i].longitude) 
} 

if (i == response.length - 1) { 
    endPoint = new google.maps.LatLng(response[i].latitude, response[i].longitude), 
} 

if ((i > 0) && (i < response.length - 1)) { 
    waypts.push({ 
     location: ew google.maps.LatLng(response[i].latitude, response[i].longitude), 
     stopover: true 
    }); 
} 

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
return function() { 
    infowindow.setContent("Name :"+response[i].name+","+"<br>"+"Date & Time :"+response[i].date+", "+response[i].time+","+"<br>"+"Location :"+response[i].address); 
    infowindow.open(map, marker); 
} 
})(marker, i)); 
} 

calcRoute(startPoint, endPoint, waypts); 

//add this function 
function calcRoute(start,end,waypts) { 
var request = { 
    origin: start, 
    destination: end, 
    waypoints: waypts, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
}; 
directionsService.route(request, function(response, status) { 
if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 
} 
}); 
}