◆Google Maps API V3 + Directions API (マップ(地図)をクリックしてルート経路検索)
v2と何が違うかは、さておきGoogle Maps JavaScript API V3 デモ ギャラリーから自分のサイトで使えそうなサンプルを試してみる。
コレがのちのちiPhone(アイフォン)用でも使えそう。
このデモギャラリーサンプル、機能が足りないところがあるので追加。
- Get directions!で表示せた緑色のマーカー(アイコン)も移動できないので、同様に「draggable: true」を追加。
- 日本で対応していない var mode の “case “bicycling”: mode = google.maps.DirectionsTravelMode.DRIVING;break;”をscriptから削除。
- HTMLの<option value=”bicycling”>は削除
- HTMLの input タグで、highway tolls のcheckedはデフォルトに不要なので削除
- <input type=”checkbox” id=”highways” checked=”checked” />・・・・・一般道優先(チェックすると高速を使わない)
- <input type=”checkbox” id=”tolls” checked=”checked”/>・・・・・チェックすると有料道路を使わない(※試してみたら有料の橋やバイパス道路を避けた。highwaysとは別)
- 英語コメントを日本語に書き換えて終わり。
◆header
<!–ここからGoogle Maps v3用–>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
◆script
<script type=”text/javascript”>var directionDisplay;var directionsService = new google.maps.DirectionsService();var map;var origin = null;var destination = null;var waypoints = [];var directionmarkers = [];var directionsVisible = false;function initialize(){directionsDisplay = new google.maps.DirectionsRenderer({‘draggable': true//◆追加});var chicago = new google.maps.LatLng(35.68407, 139.63623);var myOptions ={zoom:13,mapTypeId: google.maps.MapTypeId.ROADMAP,center: chicago}map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);directionsDisplay.setMap(map);directionsDisplay.setPanel(document.getElementById(“directionsPanel”));google.maps.event.addListener(map, ‘click’, function(event){if (origin == null){origin = event.latLng;addMarker(origin);}else if (destination == null){destination = event.latLng;addMarker(destination);}else{if (waypoints.length < 9){waypoints.push({ location: destination, stopover: true });destination = event.latLng;addMarker(destination);}else{alert(“Way Pointは、これ以上設定できません。”);}}});}function addMarker(latlng){directionmarkers.push(new google.maps.Marker({position: latlng,map: map,icon: “http://maps.google.com/mapfiles/marker” + String.fromCharCode(directionmarkers.length + 65) + “.png”}));}function calcRoute(){if (origin == null){alert(“Click on the map to add a start point”);return;}if (destination == null){alert(“Click on the map to add an end point”);return;}var mode;switch (document.getElementById(“mode”).value){case “driving”:mode = google.maps.DirectionsTravelMode.DRIVING;break;case “walking”:mode = google.maps.DirectionsTravelMode.WALKING;break;}var request ={origin: origin,destination: destination,waypoints: waypoints,travelMode: mode,optimizeWaypoints: document.getElementById(‘optimize’).checked,avoidHighways: document.getElementById(‘highways’).checked,avoidTolls: document.getElementById(‘tolls’).checked};directionsService.route(request, function(response, status){if (status == google.maps.DirectionsStatus.OK){directionsDisplay.setDirections(response);}});clearMarkers();directionsVisible = true;}function updateMode(){if (directionsVisible){calcRoute();}}function clearMarkers(){for (var i = 0; i < directionmarkers.length; i++){directionmarkers[i].setMap(null);}}function clearWaypoints(){directionmarkers = [];origin = null;destination = null;waypoints = [];directionsVisible = true;}function reset(){clearMarkers();clearWaypoints();directionsDisplay.setMap(null);directionsDisplay.setPanel(null);directionsDisplay = new google.maps.DirectionsRenderer();directionsDisplay.setMap(map);directionsDisplay.setPanel(document.getElementById(“directionsPanel”));}</script>
◆body内html
<table width=”719″ style=”width : 600px;”>
<tr>
<td width=”363″><input type=”checkbox” id=”optimize” checked=”checked” />ルート最適化・・・・アイコンの近い順に並び替え</td>
<td width=”227″><select id=”mode” onchange=”updateMode()”>
<option value=”driving”>自動車</option>
<option value=”walking”>徒歩</option>
</select>・・・・自転車は削除</td>
</tr><tr>
<td width=”363″><input type=”checkbox” id=”highways” />一般道優先・・・・チェックすると高速を使わない</td>
<td width=”227″><input type=”button” value=”Reset” onclick=”reset()” />・・・・アイコン消去</td>
</tr><tr>
<td width=”363″><input type=”checkbox” id=”tolls” />有料道路を避ける・・・・チェックすると有料道路(高速を除く)を使わない</td>
<td width=”227″><input type=”button” value=”Get Directions!” onclick=”calcRoute()” />・・・・ルート収得</td>
</tr>
</table>
◆サンプルページ
◆Google Maps JavaScript API V3
関連記事一覧
スポンサードリンク
Leave a Comment