概要
- Google Map API を使って始点終点の経路情報と地図画像を得る。
- Google Maps JavaScript API - DirectionsServiceを使って経路検索を行ないます。
- Static Maps APIを使って地図画像を得ます。
- coderepos.org にアクセスできないようなので uneval をコメントアウト。(2013-12-06)
ソース
gmap.html
-
http://www.takeash.net/Etc/gmap.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Google Map API</title> <link rel="stylesheet" type="text/css" href="http://www.takeash.net/take.css"> <style TYPE="text/css"> <!-- .debug { display: none; } --> </style> </head> <body onload="init()"> <h1>Google Map API</h1> <ul> <li><p><a href="http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html">Google Maps JavaScript API</a> - <a href="http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#DirectionsService">DirectionsService</a>を使って経路検索を行ないます。</p></li> <li><p><a href="http://code.google.com/intl/ja/apis/maps/documentation/staticmaps/">Static Maps API</a>を使って地図画像を得ます。</p></li> </ul> <form id="FORMGMAP" action="#"> <table summary="Map Options" border="1"> <tr><th>出発地</th><td><input id="START" type="text" value="東京駅"></td></tr> <tr><th>目的地</th><td><input id="GOAL" type="text" value="東京ビックサイト"></td></tr> <tr><th>手段</th><td> <select id="TRAVELMODE"> <option value="W" selected>徒歩</option> <option value="D">自動車</option> <option value="B">自転車</option> </select> </td></tr> <tr><th>マップタイプ</th><td> <select id="MAPTYPE"> <option value="R" selected>道路地図</option> <option value="S">航空写真</option> <option value="T">地形図</option> <option value="H">組み合わせ</option> </select> </td></tr> <tr><th>大きさ</th><td> <select id="MAPSIZE"> <option value="200x200">200x200</option> <option value="300x300" selected>300x300</option> <option value="400x400">400x400</option> <option value="400x640">400x640</option> <option value="500x500">500x500</option> <option value="640x400">640x400</option> <option value="640x640">640x640</option> </select> </td></tr> <tr class="debug"><th>モバイル</th><td><input id="MOBILE" name="MOBILE" type="checkbox" value="on"> <label for="mobile">モバイルモード</label></td></tr> <tr><td colspan="2" align="center"><input type="button" value=" 表示 " onclick="getMap()"></td></tr> </table> </form> <h2 id="TITLE">出発地 - 目的地</h2> <p><img id="GMAP" alt="gmap" src="http://code.google.com/images/code_logo.png"></p> <div class="debug"><textarea id="DEBUG" rows="30" cols="100">debug</textarea></div> <!-- http://www.openspc2.org/reibun/Google/Maps/API/ver3/ --> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <!-- http://blog.livedoor.jp/dankogai/archives/50958256.html --> <!-- <script type="text/javascript" src="http://coderepos.org/share/browser/lang/javascript/clone/trunk/uneval.js?format=txt"></script> --> <script type="text/javascript" src="http://www.takeash.net/Etc/gmap.js"></script> </body> </html>
gmap.js
-
http://www.takeash.net/Etc/gmap.js
/* Google Map 表示(経路付き) gmap.js 2010.11.07 初版。 2010.11.08 LatLng のアクセス方法変更。地図の中心を求めるのに LatLngBounds を使うようにした。タイトルを検索結果で置き換えるようにした。 */ var GoogleMapStaticAPI = "http://maps.google.com/maps/api/staticmap?sensor=false"; var TravelMode = { 'W':'WALKING', 'D':'DRIVING', 'B':'BICYCLING' }; var MapType = { 'R':'roadmap', 'S':'satellite', 'T':'terrain', 'H':'hybrid' }; function getMap(){ var directionsService = new google.maps.DirectionsService(); var elmStart = document.getElementById( "START" ); var elmGoal = document.getElementById( "GOAL" ); var elmTravelMode = document.getElementById( "TRAVELMODE" ); var travelmode = TravelMode[ elmTravelMode.options[ elmTravelMode.selectedIndex ].value ] || TravelMode[ 'W' ]; var elmMapType = document.getElementById( "MAPTYPE" ); var maptype = MapType[ elmMapType.options[ elmMapType.selectedIndex ].value ] || MapType[ 'R' ]; var elmMapSize = document.getElementById( "MAPSIZE" ); var mapsize = elmMapSize.options[ elmMapSize.selectedIndex ].value; if ( !mapsize.match( /\d+x\d+/ ) ){ mapsize = "300x300"; } var elmMobile = document.getElementById( "MOBILE" ); var elmTitle = document.getElementById( "TITLE" ); var elmGMap = document.getElementById( "GMAP" ); var elmDebug = document.getElementById( "DEBUG" ); directionsService.route( { origin : elmStart.value, destination: elmGoal.value, travelMode: google.maps.DirectionsTravelMode[ travelmode ] }, function( response, status ){ if ( status == google.maps.DirectionsStatus.OK ) { var legs = response['routes'][0]['legs'][0]; //elmDebug.value = uneval( legs ); if ( elmTitle.textContent ){ elmTitle.textContent = legs['start_address'] + ' - ' + legs['end_address']; } else { elmTitle.innerText = legs['start_address'] + ' - ' + legs['end_address']; } var start_loc = legs['start_location']; var end_loc = legs['end_location']; // var center_loc = new LatLngBounds(start_loc,end_loc).getCenter() だと // スタートとエンドを入れ替えたときに変な値を返すことがある var bounds = new google.maps.LatLngBounds(); bounds.extend( start_loc ); bounds.extend( end_loc ); var center_loc = bounds.getCenter(); elmGMap.src = GoogleMapStaticAPI + '&maptype=' + maptype + '&size=' + mapsize + '&mobile=' + elmMobile.checked + '¢er=' + center_loc.toUrlValue() + '&markers=label:S|' + start_loc.toUrlValue() + '&markers=label:G|' + end_loc.toUrlValue() + '&path=enc:' + response['routes'][0]['overview_polyline']['points']; }else{ //elmDebug.value = uneval( response ); if ( elmTitle.textContent ){ elmTitle.textContent = "Error: " + response.status; } else { elmTitle.innerText = "Error: " + response.status; } elmGMap.src = "http://code.google.com/images/code_logo.png"; } } ); } // JavaScriptの動かないコード (中級編) onKeydownイベントが認識されない // http://d.hatena.ne.jp/language_and_engineering/20081112/1226507019 function init(){ document.onkeyup = myExec; } // <input type="text">でEnterを押してもsubmitさせない方法【HTML, JavaScript】 // http://www.programming-magic.com/20080119212425/ function myExec(e){ if (!e) var e = window.event; if( e.keyCode == 13 ){ getMap(); } } // EOF