このサイトを見てるような人は、企業のホームページ制作を請けおって、その会社案内ページなんかにグーグルマップを張り込む仕事をしているような人だと思います。
でも、その会社案内ページを見る人って、会社へのルートを調べたりするのが主な用途ですよね?
そんなユーザー様のために、ルートを調べるひと手間を減らしてあげましょう。
こんな感じで、最寄り駅の「浜松町駅」から「東京タワー」へのルートを地図上に表示できます。 もちろん徒歩ルート以外にも、車や電車でのルート検索・表示も可能です。詳しくは 公式ドキュメント をどうぞ。
ソースは以下のとおり。(なんですが、ちょっと違った方法もこの後に記載します)
<div id="map-canvas" class="map-canvas" style="width:640px;height:480px;"></div>
<script type="text/javascript">
function initMap() {
var myLatlng = {lat: 35.658620, lng: 139.745417};
var map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 16,
center: myLatlng,
});
var request = {
origin: "浜松町駅",
destination: "東京タワー",
travelMode: "WALKING"
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(result, status) {
if (status == 'OK') {
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setDirections(result);
console.log(JSON.stringify(result));
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>ですが。
ある程度のアクセスがある企業だと、有料になるかもしれません
https://developers.google.com/maps/documentation/directions/usage-and-billing?hl=ja
なので、1回取得したルート(DirectionsService オブジェクト)は使いまわしちゃいましょう!
上のソースの 21 行目がキモ。
DirectionsService オブジェクトをもうソースに直で書いちゃう!
そうすればもう DirectionsService を呼び出さなくてもよくなっちゃう!
こんな感じ。
<div id="map-canvas" class="map-canvas" style="width:640px;height:480px;"></div>
<script type="text/javascript">
function initMap() {
var myLatlng = {lat: 35.658620, lng: 139.745417};
var map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 16,
center: myLatlng,
});
var directionsDisplay = new google.maps.DirectionsRenderer();
var route = {"geocoded_waypoints":[{"geocoder_status":"OK","place_id":"ChIJK3eSBcaLGGARscstL2SO9ug","types":["establishment","point_of_interest","train_station","transit_station"]},{"geocoder_status":"OK","place_id":"ChIJCewJkL2LGGAR3Qmk0vCTGkg","types":["establishment","point_of_interest","premise"]}],"routes":[{"bounds":{"south":35.65538,"west":139.74541000000002,"north":35.6588,"east":139.75713000000002},"copyrights":"地図データ ©2018 Google, ZENRIN","legs":[{"distance":{"text":"1.4 km","value":1354},"duration":{"text":"17分","value":1031},"end_address":"日本、〒105-0011 東京都港区芝公園4丁目2−8","end_location":{"lat":35.6585795,"lng":139.7454282},"start_address":"日本、東京都港区海岸1丁目","start_location":{"lat":35.6553808,"lng":139.75713080000003},"steps":[{"building_level":{"number":2},"distance":{"text":"77 m","value":77},"duration":{"text":"2分","value":103},"end_location":{"lat":35.6557919,"lng":139.75681980000002},"polyline":{"points":"c}rxEai_tYUd@?BCZARA?o@YCA"},"start_location":{"lat":35.6553808,"lng":139.75713080000003},"travel_mode":"WALKING","encoded_lat_lngs":"c}rxEai_tYUd@?BCZARA?o@YCA","path":[{"lat":35.65538,"lng":139.75713000000002},{"lat":35.65549,"lng":139.75694000000001},{"lat":35.65549,"lng":139.75692},{"lat":35.65551,"lng":139.75678000000002},{"lat":35.65552,"lng":139.75668000000002},{"lat":35.655530000000006,"lng":139.75668000000002},{"lat":35.655770000000004,"lng":139.75681},{"lat":35.65579,"lng":139.75682}],"lat_lngs":[{"lat":35.65538,"lng":139.75713000000002},{"lat":35.65549,"lng":139.75694000000001},{"lat":35.65549,"lng":139.75692},{"lat":35.65551,"lng":139.75678000000002},{"lat":35.65552,"lng":139.75668000000002},{"lat":35.655530000000006,"lng":139.75668000000002},{"lat":35.655770000000004,"lng":139.75681},{"lat":35.65579,"lng":139.75682}],"instructions":"77 m 歩く<div style=\"font-size:0.9em\">モノレールのりかえ口を通過する(39 m 先)</div>","maneuver":"","start_point":{"lat":35.6553808,"lng":139.75713080000003},"end_point":{"lat":35.6557919,"lng":139.75681980000002}},{"building_level":{"number":0},"distance":{"text":"4 m","value":4},"duration":{"text":"1分","value":8},"end_location":{"lat":35.6557952,"lng":139.75678629999993},"polyline":{"points":"u_sxEcg_tYAD"},"start_location":{"lat":35.6557919,"lng":139.75681980000002},"travel_mode":"WALKING","encoded_lat_lngs":"u_sxEcg_tYAD","path":[{"lat":35.65579,"lng":139.75682},{"lat":35.655800000000006,"lng":139.75679000000002}],"lat_lngs":[{"lat":35.65579,"lng":139.75682},{"lat":35.655800000000006,"lng":139.75679000000002}],"instructions":"4 m 歩く","maneuver":"","start_point":{"lat":35.6557919,"lng":139.75681980000002},"end_point":{"lat":35.6557952,"lng":139.75678629999993}},{"distance":{"text":"3 m","value":3},"duration":{"text":"1分","value":2},"end_location":{"lat":35.6558307,"lng":139.75679279999997},"polyline":{"points":"w_sxE}f_tYE?"},"start_location":{"lat":35.6557952,"lng":139.75678629999993},"travel_mode":"WALKING","encoded_lat_lngs":"w_sxE}f_tYE?","path":[{"lat":35.655800000000006,"lng":139.75679000000002},{"lat":35.65583,"lng":139.75679000000002}],"lat_lngs":[{"lat":35.655800000000006,"lng":139.75679000000002},{"lat":35.65583,"lng":139.75679000000002}],"instructions":"<b>北</b>に進む","maneuver":"","start_point":{"lat":35.6557952,"lng":139.75678629999993},"end_point":{"lat":35.6558307,"lng":139.75679279999997}},{"distance":{"text":"78 m","value":78},"duration":{"text":"1分","value":56},"end_location":{"lat":35.6564718,"lng":139.7568728},"polyline":{"points":"}_sxE}f_tY?CsBUK??H"},"start_location":{"lat":35.6558307,"lng":139.75679279999997},"travel_mode":"WALKING","encoded_lat_lngs":"}_sxE}f_tY?CsBUK??H","path":[{"lat":35.65583,"lng":139.75679000000002},{"lat":35.65583,"lng":139.75681},{"lat":35.65641,"lng":139.75692},{"lat":35.656470000000006,"lng":139.75692},{"lat":35.656470000000006,"lng":139.75687000000002}],"lat_lngs":[{"lat":35.65583,"lng":139.75679000000002},{"lat":35.65583,"lng":139.75681},{"lat":35.65641,"lng":139.75692},{"lat":35.656470000000006,"lng":139.75692},{"lat":35.656470000000006,"lng":139.75687000000002}],"instructions":"屋内通路を進む","maneuver":"","start_point":{"lat":35.6558307,"lng":139.75679279999997},"end_point":{"lat":35.6564718,"lng":139.7568728}},{"distance":{"text":"65 m","value":65},"duration":{"text":"1分","value":47},"end_location":{"lat":35.6565531,"lng":139.75616300000002},"maneuver":"turn-left","polyline":{"points":"}csxEmg_tY?DA@?JK`BAH?L"},"start_location":{"lat":35.6564718,"lng":139.7568728},"travel_mode":"WALKING","encoded_lat_lngs":"}csxEmg_tY?DA@?JK`BAH?L","path":[{"lat":35.656470000000006,"lng":139.75687000000002},{"lat":35.656470000000006,"lng":139.75684},{"lat":35.65648,"lng":139.75683},{"lat":35.65648,"lng":139.75677000000002},{"lat":35.65654,"lng":139.75628},{"lat":35.65655,"lng":139.75623000000002},{"lat":35.65655,"lng":139.75616000000002}],"lat_lngs":[{"lat":35.656470000000006,"lng":139.75687000000002},{"lat":35.656470000000006,"lng":139.75684},{"lat":35.65648,"lng":139.75683},{"lat":35.65648,"lng":139.75677000000002},{"lat":35.65654,"lng":139.75628},{"lat":35.65655,"lng":139.75623000000002},{"lat":35.65655,"lng":139.75616000000002}],"instructions":"<b>左折</b>する","start_point":{"lat":35.6564718,"lng":139.7568728},"end_point":{"lat":35.6565531,"lng":139.75616300000002}},{"distance":{"text":"72 m","value":72},"duration":{"text":"1分","value":52},"end_location":{"lat":35.6566339,"lng":139.75537610000003},"polyline":{"points":"mdsxE_c_tYAPAH?B?FKrB"},"start_location":{"lat":35.6565531,"lng":139.75616300000002},"travel_mode":"WALKING","encoded_lat_lngs":"mdsxE_c_tYAPAH?B?FKrB","path":[{"lat":35.65655,"lng":139.75616000000002},{"lat":35.656560000000006,"lng":139.75607000000002},{"lat":35.65657,"lng":139.75602},{"lat":35.65657,"lng":139.756},{"lat":35.65657,"lng":139.75596000000002},{"lat":35.65663,"lng":139.75538}],"lat_lngs":[{"lat":35.65655,"lng":139.75616000000002},{"lat":35.656560000000006,"lng":139.75607000000002},{"lat":35.65657,"lng":139.75602},{"lat":35.65657,"lng":139.756},{"lat":35.65657,"lng":139.75596000000002},{"lat":35.65663,"lng":139.75538}],"instructions":"横断歩道を渡る","maneuver":"","start_point":{"lat":35.6565531,"lng":139.75616300000002},"end_point":{"lat":35.6566339,"lng":139.75537610000003}},{"distance":{"text":"47 m","value":47},"duration":{"text":"1分","value":33},"end_location":{"lat":35.6566895,"lng":139.75486479999995},"polyline":{"points":"}dsxEc~~sYAZCDA^ARAP"},"start_location":{"lat":35.6566339,"lng":139.75537610000003},"travel_mode":"WALKING","encoded_lat_lngs":"}dsxEc~~sYAZCDA^ARAP","path":[{"lat":35.65663,"lng":139.75538},{"lat":35.65664,"lng":139.75524000000001},{"lat":35.65666,"lng":139.75521},{"lat":35.656670000000005,"lng":139.75505},{"lat":35.65668,"lng":139.75495},{"lat":35.656690000000005,"lng":139.75486}],"lat_lngs":[{"lat":35.65663,"lng":139.75538},{"lat":35.65664,"lng":139.75524000000001},{"lat":35.65666,"lng":139.75521},{"lat":35.656670000000005,"lng":139.75505},{"lat":35.65668,"lng":139.75495},{"lat":35.656690000000005,"lng":139.75486}],"instructions":"横断歩道を渡る","maneuver":"","start_point":{"lat":35.6566339,"lng":139.75537610000003},"end_point":{"lat":35.6566895,"lng":139.75486479999995}},{"distance":{"text":"65 m","value":65},"duration":{"text":"1分","value":46},"end_location":{"lat":35.6567519,"lng":139.75415180000005},"polyline":{"points":"iesxE{z~sYEhAALCt@"},"start_location":{"lat":35.6566895,"lng":139.75486479999995},"travel_mode":"WALKING","encoded_lat_lngs":"iesxE{z~sYEhAALCt@","path":[{"lat":35.656690000000005,"lng":139.75486},{"lat":35.65672,"lng":139.75449},{"lat":35.65673,"lng":139.75442},{"lat":35.65675,"lng":139.75415}],"lat_lngs":[{"lat":35.656690000000005,"lng":139.75486},{"lat":35.65672,"lng":139.75449},{"lat":35.65673,"lng":139.75442},{"lat":35.65675,"lng":139.75415}],"instructions":"横断歩道を渡る","maneuver":"","start_point":{"lat":35.6566895,"lng":139.75486479999995},"end_point":{"lat":35.6567519,"lng":139.75415180000005}},{"distance":{"text":"37 m","value":37},"duration":{"text":"1分","value":27},"end_location":{"lat":35.6567914,"lng":139.75374269999998},"polyline":{"points":"uesxEmv~sYAHEfA"},"start_location":{"lat":35.6567519,"lng":139.75415180000005},"travel_mode":"WALKING","encoded_lat_lngs":"uesxEmv~sYAHEfA","path":[{"lat":35.65675,"lng":139.75415},{"lat":35.656760000000006,"lng":139.75410000000002},{"lat":35.65679,"lng":139.75374000000002}],"lat_lngs":[{"lat":35.65675,"lng":139.75415},{"lat":35.656760000000006,"lng":139.75410000000002},{"lat":35.65679,"lng":139.75374000000002}],"instructions":"道路を渡る","maneuver":"","start_point":{"lat":35.6567519,"lng":139.75415180000005},"end_point":{"lat":35.6567914,"lng":139.75374269999998}},{"distance":{"text":"42 m","value":42},"duration":{"text":"1分","value":30},"end_location":{"lat":35.656833,"lng":139.7532827},"polyline":{"points":"}esxE{s~sYAHEpA"},"start_location":{"lat":35.6567914,"lng":139.75374269999998},"travel_mode":"WALKING","encoded_lat_lngs":"}esxE{s~sYAHEpA","path":[{"lat":35.65679,"lng":139.75374000000002},{"lat":35.656800000000004,"lng":139.75369},{"lat":35.65683000000001,"lng":139.75328000000002}],"lat_lngs":[{"lat":35.65679,"lng":139.75374000000002},{"lat":35.656800000000004,"lng":139.75369},{"lat":35.65683000000001,"lng":139.75328000000002}],"instructions":"道路を渡る","maneuver":"","start_point":{"lat":35.6567914,"lng":139.75374269999998},"end_point":{"lat":35.656833,"lng":139.7532827}},{"distance":{"text":"34 m","value":34},"duration":{"text":"1分","value":24},"end_location":{"lat":35.656856,"lng":139.75291909999999},"polyline":{"points":"efsxE_q~sYADE~@@@"},"start_location":{"lat":35.656833,"lng":139.7532827},"travel_mode":"WALKING","encoded_lat_lngs":"efsxE_q~sYADE~@@@","path":[{"lat":35.65683000000001,"lng":139.75328000000002},{"lat":35.65684,"lng":139.75325},{"lat":35.656870000000005,"lng":139.75293000000002},{"lat":35.65686,"lng":139.75292000000002}],"lat_lngs":[{"lat":35.65683000000001,"lng":139.75328000000002},{"lat":35.65684,"lng":139.75325},{"lat":35.656870000000005,"lng":139.75293000000002},{"lat":35.65686,"lng":139.75292000000002}],"instructions":"道路を渡る","maneuver":"","start_point":{"lat":35.656833,"lng":139.7532827},"end_point":{"lat":35.656856,"lng":139.75291909999999}},{"distance":{"text":"0.1 km","value":114},"duration":{"text":"1分","value":82},"end_location":{"lat":35.6570321,"lng":139.75170619999994},"polyline":{"points":"kfsxEwn~sYA\\EBEJSbE"},"start_location":{"lat":35.656856,"lng":139.75291909999999},"travel_mode":"WALKING","encoded_lat_lngs":"kfsxEwn~sYA\\EBEJSbE","path":[{"lat":35.65686,"lng":139.75292000000002},{"lat":35.656870000000005,"lng":139.75277},{"lat":35.6569,"lng":139.75275000000002},{"lat":35.65693,"lng":139.75269},{"lat":35.657030000000006,"lng":139.75171}],"lat_lngs":[{"lat":35.65686,"lng":139.75292000000002},{"lat":35.656870000000005,"lng":139.75277},{"lat":35.6569,"lng":139.75275000000002},{"lat":35.65693,"lng":139.75269},{"lat":35.657030000000006,"lng":139.75171}],"instructions":"横断歩道を渡る","maneuver":"","start_point":{"lat":35.656856,"lng":139.75291909999999},"end_point":{"lat":35.6570321,"lng":139.75170619999994}},{"distance":{"text":"84 m","value":84},"duration":{"text":"1分","value":60},"end_location":{"lat":35.6571107,"lng":139.75079129999995},"polyline":{"points":"mgsxEeg~sY?NQbD@B"},"start_location":{"lat":35.6570321,"lng":139.75170619999994},"travel_mode":"WALKING","encoded_lat_lngs":"mgsxEeg~sY?NQbD@B","path":[{"lat":35.657030000000006,"lng":139.75171},{"lat":35.657030000000006,"lng":139.75163},{"lat":35.657120000000006,"lng":139.75081},{"lat":35.65711,"lng":139.75079000000002}],"lat_lngs":[{"lat":35.657030000000006,"lng":139.75171},{"lat":35.657030000000006,"lng":139.75163},{"lat":35.657120000000006,"lng":139.75081},{"lat":35.65711,"lng":139.75079000000002}],"instructions":"道路を渡る","maneuver":"","start_point":{"lat":35.6570321,"lng":139.75170619999994},"end_point":{"lat":35.6571107,"lng":139.75079129999995}},{"distance":{"text":"40 m","value":40},"duration":{"text":"1分","value":29},"end_location":{"lat":35.6571523,"lng":139.75035100000002},"polyline":{"points":"}gsxEma~sYAJEjA"},"start_location":{"lat":35.6571107,"lng":139.75079129999995},"travel_mode":"WALKING","encoded_lat_lngs":"}gsxEma~sYAJEjA","path":[{"lat":35.65711,"lng":139.75079000000002},{"lat":35.657120000000006,"lng":139.75073},{"lat":35.65715,"lng":139.75035}],"lat_lngs":[{"lat":35.65711,"lng":139.75079000000002},{"lat":35.657120000000006,"lng":139.75073},{"lat":35.65715,"lng":139.75035}],"instructions":"横断歩道を渡る","maneuver":"","start_point":{"lat":35.6571107,"lng":139.75079129999995},"end_point":{"lat":35.6571523,"lng":139.75035100000002}},{"distance":{"text":"91 m","value":91},"duration":{"text":"1分","value":65},"end_location":{"lat":35.6578003,"lng":139.7502174},"polyline":{"points":"ehsxEu~}sY[CEl@_BO"},"start_location":{"lat":35.6571523,"lng":139.75035100000002},"travel_mode":"WALKING","encoded_lat_lngs":"ehsxEu~}sY[CEl@_BO","path":[{"lat":35.65715,"lng":139.75035},{"lat":35.65729,"lng":139.75037},{"lat":35.657320000000006,"lng":139.75014000000002},{"lat":35.6578,"lng":139.75022}],"lat_lngs":[{"lat":35.65715,"lng":139.75035},{"lat":35.65729,"lng":139.75037},{"lat":35.657320000000006,"lng":139.75014000000002},{"lat":35.6578,"lng":139.75022}],"instructions":"横断歩道を渡る","maneuver":"","start_point":{"lat":35.6571523,"lng":139.75035100000002},"end_point":{"lat":35.6578003,"lng":139.7502174}},{"distance":{"text":"0.3 km","value":288},"duration":{"text":"3分","value":209},"end_location":{"lat":35.6580735,"lng":139.74707020000005},"maneuver":"turn-left","polyline":{"points":"glsxE{}}sYOpBG~@MhB[lEC^FpAFX"},"start_location":{"lat":35.6578003,"lng":139.7502174},"travel_mode":"WALKING","encoded_lat_lngs":"glsxE{}}sYOpBG~@MhB[lEC^FpAFX","path":[{"lat":35.6578,"lng":139.75022},{"lat":35.657880000000006,"lng":139.74965},{"lat":35.657920000000004,"lng":139.74933000000001},{"lat":35.657990000000005,"lng":139.74880000000002},{"lat":35.65813,"lng":139.74777},{"lat":35.658150000000006,"lng":139.74761},{"lat":35.65811,"lng":139.74720000000002},{"lat":35.65807,"lng":139.74707}],"lat_lngs":[{"lat":35.6578,"lng":139.75022},{"lat":35.657880000000006,"lng":139.74965},{"lat":35.657920000000004,"lng":139.74933000000001},{"lat":35.657990000000005,"lng":139.74880000000002},{"lat":35.65813,"lng":139.74777},{"lat":35.658150000000006,"lng":139.74761},{"lat":35.65811,"lng":139.74720000000002},{"lat":35.65807,"lng":139.74707}],"instructions":"<b>左折</b>する","start_point":{"lat":35.6578003,"lng":139.7502174},"end_point":{"lat":35.6580735,"lng":139.74707020000005}},{"distance":{"text":"23 m","value":23},"duration":{"text":"1分","value":16},"end_location":{"lat":35.6582749,"lng":139.7471071},"polyline":{"points":"}msxEej}sYUEQA"},"start_location":{"lat":35.6580735,"lng":139.74707020000005},"travel_mode":"WALKING","encoded_lat_lngs":"}msxEej}sYUEQA","path":[{"lat":35.65807,"lng":139.74707},{"lat":35.65818,"lng":139.74710000000002},{"lat":35.65827,"lng":139.74711000000002}],"lat_lngs":[{"lat":35.65807,"lng":139.74707},{"lat":35.65818,"lng":139.74710000000002},{"lat":35.65827,"lng":139.74711000000002}],"instructions":"横断歩道を渡る","maneuver":"","start_point":{"lat":35.6580735,"lng":139.74707020000005},"end_point":{"lat":35.6582749,"lng":139.7471071}},{"distance":{"text":"38 m","value":38},"duration":{"text":"1分","value":27},"end_location":{"lat":35.6584529,"lng":139.74680020000005},"polyline":{"points":"eosxEmj}sYIn@YL"},"start_location":{"lat":35.6582749,"lng":139.7471071},"travel_mode":"WALKING","encoded_lat_lngs":"eosxEmj}sYIn@YL","path":[{"lat":35.65827,"lng":139.74711000000002},{"lat":35.65832,"lng":139.74687},{"lat":35.65845,"lng":139.7468}],"lat_lngs":[{"lat":35.65827,"lng":139.74711000000002},{"lat":35.65832,"lng":139.74687},{"lat":35.65845,"lng":139.7468}],"instructions":"横断歩道を渡る","maneuver":"","start_point":{"lat":35.6582749,"lng":139.7471071},"end_point":{"lat":35.6584529,"lng":139.74680020000005}},{"distance":{"text":"46 m","value":46},"duration":{"text":"1分","value":33},"end_location":{"lat":35.6586081,"lng":139.74632859999997},"maneuver":"turn-left","polyline":{"points":"ipsxEoh}sYADETIVKd@AB"},"start_location":{"lat":35.6584529,"lng":139.74680020000005},"travel_mode":"WALKING","encoded_lat_lngs":"ipsxEoh}sYADETIVKd@AB","path":[{"lat":35.65845,"lng":139.7468},{"lat":35.658460000000005,"lng":139.74677},{"lat":35.65849,"lng":139.74666000000002},{"lat":35.65854,"lng":139.74654},{"lat":35.6586,"lng":139.74635},{"lat":35.65861,"lng":139.74633}],"lat_lngs":[{"lat":35.65845,"lng":139.7468},{"lat":35.658460000000005,"lng":139.74677},{"lat":35.65849,"lng":139.74666000000002},{"lat":35.65854,"lng":139.74654},{"lat":35.6586,"lng":139.74635},{"lat":35.65861,"lng":139.74633}],"instructions":"<b>左折</b>する","start_point":{"lat":35.6584529,"lng":139.74680020000005},"end_point":{"lat":35.6586081,"lng":139.74632859999997}},{"distance":{"text":"15 m","value":15},"duration":{"text":"1分","value":11},"end_location":{"lat":35.6585942,"lng":139.7462094},"polyline":{"points":"iqsxEqe}sYGNJF"},"start_location":{"lat":35.6586081,"lng":139.74632859999997},"travel_mode":"WALKING","encoded_lat_lngs":"iqsxEqe}sYGNJF","path":[{"lat":35.65861,"lng":139.74633},{"lat":35.65865,"lng":139.74625},{"lat":35.658590000000004,"lng":139.74621000000002}],"lat_lngs":[{"lat":35.65861,"lng":139.74633},{"lat":35.65865,"lng":139.74625},{"lat":35.658590000000004,"lng":139.74621000000002}],"instructions":"横断歩道を渡る","maneuver":"","start_point":{"lat":35.6586081,"lng":139.74632859999997},"end_point":{"lat":35.6585942,"lng":139.7462094}},{"distance":{"text":"85 m","value":85},"duration":{"text":"1分","value":66},"end_location":{"lat":35.65863119999999,"lng":139.74541109999996},"polyline":{"points":"eqsxEyd}sYEJc@jARNLv@"},"start_location":{"lat":35.6585942,"lng":139.7462094},"travel_mode":"WALKING","encoded_lat_lngs":"eqsxEyd}sYEJc@jARNLv@","path":[{"lat":35.658590000000004,"lng":139.74621000000002},{"lat":35.658620000000006,"lng":139.74615},{"lat":35.6588,"lng":139.74577000000002},{"lat":35.6587,"lng":139.74569000000002},{"lat":35.65863,"lng":139.74541000000002}],"lat_lngs":[{"lat":35.658590000000004,"lng":139.74621000000002},{"lat":35.658620000000006,"lng":139.74615},{"lat":35.6588,"lng":139.74577000000002},{"lat":35.6587,"lng":139.74569000000002},{"lat":35.65863,"lng":139.74541000000002}],"instructions":"敷地内通路を進む","maneuver":"","start_point":{"lat":35.6585942,"lng":139.7462094},"end_point":{"lat":35.65863119999999,"lng":139.74541109999996}},{"distance":{"text":"6 m","value":6},"duration":{"text":"1分","value":5},"end_location":{"lat":35.6585795,"lng":139.7454282},"maneuver":"turn-left","polyline":{"points":"mqsxEy_}sYHC"},"start_location":{"lat":35.65863119999999,"lng":139.74541109999996},"travel_mode":"WALKING","encoded_lat_lngs":"mqsxEy_}sYHC","path":[{"lat":35.65863,"lng":139.74541000000002},{"lat":35.65858,"lng":139.74543}],"lat_lngs":[{"lat":35.65863,"lng":139.74541000000002},{"lat":35.65858,"lng":139.74543}],"instructions":"<b>左折</b>する","start_point":{"lat":35.65863119999999,"lng":139.74541109999996},"end_point":{"lat":35.6585795,"lng":139.7454282}}],"traffic_speed_entry":[],"via_waypoint":[],"via_waypoints":[]}],"overview_polyline":"c}rxEai_tYUh@En@u@[ADE??CsBUK??HAFMdCCf@MnCEd@K|BMpCGvAC`AA\\EBEJSbEQrD?NEjA[CEl@_BOWpDi@vHC^FpAFXUEQAIn@YLADOl@Mh@GNJFi@vARNLv@HC","summary":"","warnings":["徒歩ルートの表示は Beta 版です。 注意 – このルートには歩道のない道が含まれている可能性があります。"],"waypoint_order":[],"overview_path":[{"lat":35.65538,"lng":139.75713000000002},{"lat":35.65549,"lng":139.75692},{"lat":35.65552,"lng":139.75668000000002},{"lat":35.65579,"lng":139.75682},{"lat":35.655800000000006,"lng":139.75679000000002},{"lat":35.65583,"lng":139.75679000000002},{"lat":35.65583,"lng":139.75681},{"lat":35.65641,"lng":139.75692},{"lat":35.656470000000006,"lng":139.75692},{"lat":35.656470000000006,"lng":139.75687000000002},{"lat":35.65648,"lng":139.75683},{"lat":35.65655,"lng":139.75616000000002},{"lat":35.65657,"lng":139.75596000000002},{"lat":35.65664,"lng":139.75524000000001},{"lat":35.656670000000005,"lng":139.75505},{"lat":35.65673,"lng":139.75442},{"lat":35.656800000000004,"lng":139.75369},{"lat":35.65684,"lng":139.75325},{"lat":35.65686,"lng":139.75292000000002},{"lat":35.656870000000005,"lng":139.75277},{"lat":35.6569,"lng":139.75275000000002},{"lat":35.65693,"lng":139.75269},{"lat":35.657030000000006,"lng":139.75171},{"lat":35.657120000000006,"lng":139.75081},{"lat":35.657120000000006,"lng":139.75073},{"lat":35.65715,"lng":139.75035},{"lat":35.65729,"lng":139.75037},{"lat":35.657320000000006,"lng":139.75014000000002},{"lat":35.6578,"lng":139.75022},{"lat":35.657920000000004,"lng":139.74933000000001},{"lat":35.65813,"lng":139.74777},{"lat":35.658150000000006,"lng":139.74761},{"lat":35.65811,"lng":139.74720000000002},{"lat":35.65807,"lng":139.74707},{"lat":35.65818,"lng":139.74710000000002},{"lat":35.65827,"lng":139.74711000000002},{"lat":35.65832,"lng":139.74687},{"lat":35.65845,"lng":139.7468},{"lat":35.658460000000005,"lng":139.74677},{"lat":35.65854,"lng":139.74654},{"lat":35.65861,"lng":139.74633},{"lat":35.65865,"lng":139.74625},{"lat":35.658590000000004,"lng":139.74621000000002},{"lat":35.6588,"lng":139.74577000000002},{"lat":35.6587,"lng":139.74569000000002},{"lat":35.65863,"lng":139.74541000000002},{"lat":35.65858,"lng":139.74543}]}],"status":"OK","request":{"origin":{"query":"浜松町駅"},"destination":{"query":"東京タワー"},"travelMode":"WALKING"}};
directionsDisplay.setMap(map);
directionsDisplay.setDirections(route);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>このページもこんな感じにしています。
なお、お試しの際には API Manager で Directions API を ON にするのを忘れないでくださいね。