google map API を使って距離計測
クリックした場所を初期位置として二区間の距離計測をしたいのですが、以下のエラーが発生しました。
InvalidValueError: unknown property origins
こちらが問題のコードです
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>ハザードマップ</title>
<style>
/ #right-panel {
font-family: 'Hiragino Sans','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#map {
height: 100%;
float: left;
width: 63%;
height: 100%;
}
#left-panel {/*追加*/
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#left-panel select, #leftt-panel input {
font-size: 15px;
}
#left-panel select {
width: 100%;
}
#left-panel d {
font-size: 12px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#left-panel {
margin: 1px;
border-width: 20px;
width: 20%;
height: 400px;
float: left;
text-align: left;
padding-top: 0;
}/*追加*/
#directions-panel {
margin-top: 10px;
background-color: #FFEE77;
padding: 10px;
}/*追加*/
</style>
</head>
<body>
<div id="map"></div>
<b>指定した場所の座標: </b><div id="lat"></div>
<div id="lng"></div>
<p>目的地までの距離: <span id="total"></span></p>
<p>所要時間: <span id="time"></span></p>
<div id="left-panel">
<div>
<b>初期位置A:クリックして指定</b>
<br>
<b>目的地B:</b>
<select id="end">
<option value="柏の葉高校">柏の葉高校</option>
<option value="柏駅">柏駅</option>
<option value="柏市大青田１５３６番地の１">柏市立田中北小学校</option>
<option value="柏市柏の葉四丁目４番地の１">柏市立十余二小学校</option>
<option value="柏市大室１１９３番地の３">柏市立田中小学校</option>
<option value="柏市花野井１６５２番地の３４">柏市立花野井小学校</option>
<option value="柏市十余二３４８番地５１中央４０４街区１">柏市立柏の葉小学校</option>
<option value="柏市大室２４９番地の９">柏市立田中中学校</option>
<option value="柏市船戸山高野３２５番地の１">柏市立柏高等学校</option>
<option value="柏市柏の葉六丁目１番地">千葉県立柏の葉高等学校</option>
<option value="柏市十余二３１３番地の９２">柏市青少年センター</option>
<option value="柏市柏の葉一丁目１０番">中十余二第一公園</option>
<option value="柏市柏の葉二丁目１６番">中十余二第二公園</option>
<option value="柏市大室１３１１番地の６">柏ビレジ近隣公園</option>
<option value="柏市船戸１８０５番地">北部緑地</option>
<option value="柏市花野井９７４番地１">旧吉田家住宅歴史公園（芝生広場）</option>
<option value="柏市西原四丁目１７番１号">柏市立西原小学校</option>
<option value="柏市西原六丁目１３番１号">柏市立西原中学校</option>
<option value="柏市十余二１番地の２０">流通経済大学付属柏高校</option>
<option value="柏市布施８４番地の２">柏市立富勢西小学校</option>
<option value="柏市布施２１７６番地の２">柏市立富勢東小学校</option>
<option value="柏市布施９２５番地の１">柏市立富勢小学校</option>
<option value="柏市根戸４６７番地の１">柏市立富勢中学校</option>
<option value="柏市布施２５４番地">千葉県立柏高等学校</option>
<option value="柏市根戸５０７番地">富勢運動場</option>
<option value="柏市布施１９４０番地">あけぼの山公園</option>
<option value="柏市北柏三丁目９番">北柏第二公園</option>
<option value="柏市布施新町二丁目４番">布施第二公園</option>
<option value="柏市北柏二丁目９番">北柏第三公園</option>
<option value="柏市呼塚新田２７０番地の１">北柏ふるさと公園</option>
<option value="柏市松葉町五丁目３番地">柏市立松葉第一小学校</option>
<option value="柏市松葉町二丁目１６番地">柏市立松葉第二小学校</option>
<option value="柏市松葉町三丁目１４番地">柏市立松葉中学校</option>
<option value="柏市松葉町四丁目６番">松葉第一近隣公園</option>
<option value="柏市松葉町四丁目１３番">松葉第二近隣公園</option>
<option value="柏市松ヶ崎１１８２番地の９">柏市立柏第四小学校</option>
<option value="柏市高田３７６番地の３">柏市立高田小学校</option>
<option value="柏市高田９１９番地の１">柏市立柏第五中学校</option>
<option value="柏市松ヶ崎８８４番地の１">千葉県立柏中央高等学校</option>
<option value="柏市大山台１番">松ヶ崎中央公園</option>
<option value="柏市豊四季台四丁目２番１号">柏市立柏第六小学校</option>
<option value="柏市篠籠田７２３番地の１">柏市立柏第七小学校</option>
<option value="柏市明原四丁目１番１号">柏市立柏中学校</option>
<option value="柏市篠籠田９８７番地の１">柏市立柏第三中学校</option>
<option value="柏市明原三丁目１番">西口第一公園</option>
<option value="柏市旭町六丁目５番１７号">柏市立旭小学校</option>
<option value="柏市旭町五丁目３番９号">柏市立旭東小学校</option>
<option value="柏市旭町三丁目２番１号">千葉県立東葛飾高等学校</option>
<option value="柏市旭町７丁目４番８１号">気象大学校</option>
<option value="柏市豊四季３１０番地">柏市立柏第二小学校</option>
<option value="柏市豊四季２８７番地の７">柏市立豊四季中学校</option>
<option value="柏市豊四季２２４番地の３">豊四季庚塚緑地</option>
<option value="柏市あけぼの一丁目７番６号">柏市立柏第一小学校</option>
<option value="柏市柏９３２番地の７">柏市立柏第五小学校</option>
<option value="柏市戸張９４４番地">柏日体高校</option>
<option value="柏市戸張新田２６番地">北千葉導水ビジターセンター</option>
<option value="柏市戸張９０９番地">文京区立柏学園</option>
<option value="柏市柏５６５番地">柏公園</option>
<option value="柏ふるさと公園">柏ふるさと公園</option>
<option value="柏市戸張９９４番地２">戸張地区公園</option>
<option value="柏市若葉町４番５４号">柏市立柏第三小学校</option>
<option value="柏市豊四季６１０番地の２">柏市立豊小学校</option>
<option value="柏市弥生町６番６号">柏市立柏第二中学校</option>
<option value="柏市関場町８４２番地の２">関場町ゲートボール場</option>
<option value="柏市永楽台二丁目８番１号">柏市立柏第八小学校</option>
<option value="柏市永楽台二丁目１１番">永楽台近隣公園</option>
<option value="柏市日立台１丁目２番">日立台公園</option>
<option value="柏市名戸ヶ谷４７４番地の１">柏市立名戸ヶ谷小学校</option>
<option value="柏市増尾四丁目４番１号">柏市立土小学校</option>
<option value="柏市中原１８２１番地の１">柏市立中原小学校</option>
<option value="柏市増尾台三丁目５番９号">柏市立増尾西小学校</option>
<option value="柏市名戸ヶ谷一丁目６番８号">柏市立柏第四中学校</option>
<option value="柏市増尾一丁目２３番１号">柏市立土中学校</option>
<option value="柏市中原１８１６番地の２">柏市立中原中学校</option>
<option value="柏市増尾１７０５番地">千葉県立柏南高等学校</option>
<option value="柏市増尾７００番地">芝浦工業大学柏中学高校</option>
<option value="柏市新柏三丁目２番">名戸ヶ谷第五公園</option>
<option value="柏市向小金四丁目２０番１号">柏市立光ヶ丘小学校</option>
<option value="柏市光ヶ丘四丁目２３番１号">柏市立光ヶ丘中学校</option>
<option value="柏市光ヶ丘２丁目１番１号">廣池学園</option>
<option value="柏市藤心８８０番地の１">柏市立藤心小学校</option>
<option value="柏市酒井根１９番地の２">柏市立酒井根小学校</option>
<option value="柏市酒井根６６２番地の１">柏市立酒井根西小学校</option>
<option value="柏市酒井根一丁目２番１号">柏市立酒井根東小学校</option>
<option value="柏市酒井根一丁目３番１号">柏市立酒井根中学校</option>
<option value="柏市酒井根六丁目２４番">酒井根下田の森緑地</option>
<option value="柏市逆井４５２番地の２">柏市立逆井小学校</option>
<option value="柏市新逆井１丁目１０番１号">柏市立土南部小学校</option>
<option value="柏市逆井５５５番地">柏市立逆井中学校</option>
<option value="柏市南増尾六丁目１６番１号">柏市立南部中学校</option>
<option value="柏市逆井４４４番地の１">千葉県立柏陵高等学校</option>
<option value="柏市南増尾５８番地３">柏リフレッシュ公園リフレッシュプラザ柏</option>
<option value="柏市新逆井二丁目５番">南部公園</option>
<option value="柏市南逆井二丁目２番">並木第二公園</option>
<option value="柏市大井１８５４番地１">柏市立風早北部小学校</option>
<option value="柏市大津ヶ丘三丁目５０番地">柏市立大津ヶ丘第一小学校</option>
<option value="柏市大津ヶ丘四丁目８番地">柏市立大津ヶ丘第二小学校</option>
<option value="柏市塚崎１３１９番地">柏市立風早中学校</option>
<option value="柏市大津ヶ丘一丁目２５番地">柏市立大津ヶ丘中学校</option>
<option value="柏市大井２５９０番地">二松学舎大学</option>
<option value="柏市大津ヶ丘２丁目１番">大津ヶ丘中央公園</option>
<option value="柏市風早２丁目１番">風早公園</option>
<option value="柏市藤ヶ谷新田１１１番地２">柏市立風早南部小学校</option>
<option value="柏市高南台三丁目１４番地１２">柏市立高柳小学校</option>
<option value="柏市しいの木台三丁目２番地">柏市立高柳西小学校</option>
<option value="柏市高南台一丁目１番地１">柏市立高柳中学校</option>
<option value="柏市高柳９９５番地">千葉県立沼南高柳高等学校</option>
<option value="柏市藤ヶ谷１６１４番地１">海上自衛隊下総航空基地</option>
<option value="柏市しいの木台二丁目１１番地１">しいの木公園</option>
<option value="柏市手賀４７９番地７">柏市立手賀東小学校</option>
<option value="柏市泉５４１番地">柏市立手賀西小学校</option>
<option value="柏市柳戸６９０番地">柏市立手賀中学校</option>
<option value="柏市岩井６７８番地３">千葉県立沼南高等学校</option>
<option value="柏市花野井936-1">(公社)吉田記念テニス研修センター</option>
<option value="千葉県松戸市六高台2-78-3">けんま</option>
</select>
<br>
<input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
</div>
<script>
//追加
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
/*var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 35.681, lng: 140.02} //初期
});*/
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.891820616597954, lng: 139.94462999999996},
zoom: 16,
});
//クリックイベント
map.addListener('click', function(e) {
getClickLatLng(e.latLng, map);
});
var infoWindow = new google.maps.InfoWindow({map: map});
// 位置情報検索.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('現在地です');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
function getClickLatLng(lat_lng, map) {
// 座標を表示
document.getElementById('lat').textContent = lat_lng.lat();
document.getElementById('lng').textContent = lat_lng.lng();
// マーカーを設置
var marker = new google.maps.Marker({
position: lat_lng,
map: map
});
//クリックしたところにマップを中心に
map.panTo(lat_lng);
}
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
// map: map,
// panel: document.getElementById('right-panel')
});
directionsDisplay.addListener('directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});//ここまで
directionsDisplay.setMap(map);
document.getElementById('submit').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});//送信ボタンのJS
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, lat_lng) {
directionsService.route({
//初期位置をクリックして指定したい
origins: [lat_lng],
destinations: document.getElementById('end').value,
optimizeWaypoints: true,
travelMode: 'WALKING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions-panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var d = 0; d < route.legs.length; d++) {
var routeSegment = d + 1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
'</b><br>';
summaryPanel.innerHTML += route.legs[d].start_address + ' to ';
summaryPanel.innerHTML += route.legs[d].end_address + '<br>';
summaryPanel.innerHTML += route.legs[d].distance.text + '<br><br>';
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}//追加
function computeTotalDistance(result) {
var total = 0;
// var time = distance/speed;//追加
var time = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
time = total / 4.8;
time = time * 60;
time = Math.round(time);
document.getElementById('total').innerHTML = total + ' km';
document.getElementById('time').innerHTML = time + ' 分';
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBeI8QXa4QyrZBz1JhVoP95o31b-jhI7gc&callback=initMap">
</script>
</body>
</html>