マップで「トランジット」トラベル モードを使用して 4 つの方向を取得しようとしています。ただし、ページビューあたり 3 回の「トランジット」呼び出しという制限が確認されました。私のコードに何か問題があるのでしょうか、それとも有料版の Google Maps API V3 にこの制限があるのでしょうか。
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var coords = [];
var coordsIndex = 0;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
coords.push("-23.544721,-46.784817");
coords.push("-23.571372,-46.644323");
coords.push("-23.509219,-46.602631");
coords.push("-23.512052,-46.343422");
coords.push("-23.719354,-46.41552");
coordsIndex = 0;
calcRoute();
}
function calcRoute() {
var start = coords[coordsIndex];
var end = coords[coordsIndex + 1];
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.TRANSIT
};
directionsService.route(request, function (response, status) {
coordsIndex++;
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var description = '';
for (ndxRoute = 0; ndxRoute < response.routes.length; ndxRoute++) {
var route = response.routes[ndxRoute];
for (ndxLeg = 0; ndxLeg < route.legs.length; ndxLeg++) {
var leg = route.legs[ndxLeg];
if (description != '') description += '<br />';
description += leg.start_location + ' -> ' + leg.end_location + '<br />';
for (ndxStep = 0; ndxStep < leg.steps.length; ndxStep++) {
var step = leg.steps[ndxStep];
description += ' ' + step.instructions + '<br />';
}
}
}
document.all['instructions'].innerHTML += description;
}
else
window.alert('Error calling route method: ' + status.toString());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 80%;
}
@media print {
html, body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<body>
<div id="map-canvas">
</div>
<button id="nextButton" onclick="javascript:calcRoute()">
Call next route</button>
<div id="instructions">
</div>
</body>