Google Maps JavaScript API
Maps JavaScript API
http://maps.google.com/maps/api/staticmap?center=<緯度>,<軽度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦幅>&sensor=<ユーザーの位置情報取得センサーの使用の有無>
ルート検索マップ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps API SDK</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- 【1】Google Maps APIを呼び出し--> <script src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <!-- 【2】どんな地図を描くかのメイン処理 --> <script type="text/javascript"> // ■地図初期化し表示 function initialize(position) { // ■地図を表示する緯度経度を指定する var latlng = new google.maps.LatLng(35.681382,139.766084); // ■地図必須プロパティを設定 var myOptions = { // ■ズームレベルの指定 0〜17 zoom: 15, // ■地図の中心を指定(上記で設定の緯度経度latlng) center: latlng, // ■地図のタイプ設定 // ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル mapTypeId: google.maps.MapTypeId.ROADMAP };// 地図プロパティここまで //ルート検索 var rendererOptions = { draggable: true, preserveViewport:false }; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var directionsService = new google.maps.DirectionsService(); var request = { origin: "東京",//出発点 destination: "京都",//到着点 travelMode: google.maps.DirectionsTravelMode.DRIVING,//運転モード unitSystem: google.maps.DirectionsUnitSystem.METRIC, optimizeWaypoints: true, avoidHighways: false, avoidTolls: false }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); // ■<div id="map_canvas">と結びつけて、その領域に地図を描く var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // ルート検索地図に表示する directionsDisplay.setMap(map); }//initialize() </script> </head> <body onload="initialize()"> <!-- 地図はここに描画される --> <div id="map_canvas" style="width: 640px; height: 480px;"></div> </body> </html>
ルート検索マップ(詳細)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps API SDK</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- 【1】Google Maps APIを呼び出し--> <script src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <!-- 【2】どんな地図を描くかのメイン処理 --> <script type="text/javascript"> // ■地図初期化し表示 function initialize(position) { // ■地図を表示する緯度経度を指定する var latlng = new google.maps.LatLng(35.681382,139.766084); // ■地図必須プロパティを設定 var myOptions = { // ■ズームレベルの指定 0〜17 zoom: 15, // ■地図の中心を指定(上記で設定の緯度経度latlng) center: latlng, // ■地図のタイプ設定 // ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル mapTypeId: google.maps.MapTypeId.ROADMAP };// 地図プロパティここまで //ルート検索 var rendererOptions = { draggable: true, preserveViewport:false }; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var directionsService = new google.maps.DirectionsService(); var request = { origin: "東京",//出発点 destination: "京都",//到着点 travelMode: google.maps.DirectionsTravelMode.DRIVING,//運転モード unitSystem: google.maps.DirectionsUnitSystem.METRIC, optimizeWaypoints: true, avoidHighways: false, avoidTolls: false }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); directionsDisplay.setPanel(document.getElementById("directionsPanel")); } }); // ■<div id="map_canvas">と結びつけて、その領域に地図を描く var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // ルート検索地図に表示する directionsDisplay.setMap(map); }//initialize() </script> </head> <body onload="initialize()"> <!-- 地図はここに描画される --> <div id="map_canvas" style="width: 640px; height: 480px;"></div> <div id="directionsPanel" style="width: 640px; height: 480px;"></div> </body> </html>
池袋駅からここまでのルートマップ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!--iPhone用フルスクリーン表示設定--> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>ルートマップ</title> <style> html, body { margin:0; padding:0; } div#map_canvas { width:330px; height:370px; } </style> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> var map; var directionsDisplay = new google.maps.DirectionsRenderer; var directionsService = new google.maps.DirectionsService(); function initialize() { var myOptions = { center:new google.maps.LatLng(35.7242235, 139.7153773), zoom: 13, mapTypeId:google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); calcRoute(); } var end = new google.maps.LatLng(35.724442,139.715447); function calcRoute() { var request = { origin: "池袋駅", destination:end, travelMode: google.maps.DirectionsTravelMode.WALKING, optimizeWaypoints: true, }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } </script> </head> <body onload="initialize();"> <div id="map_canvas" style="width: 320px; height: 480px;"></div> </body> </html>
ルート検索
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps ルート検索</title> <style> #map_canvas { width:700px; height:500px; } #container { width: 700px; margin: auto; } </style> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="mapdrow.js"></script> </head> <body onload="initialize();"> <div id="container"> <h1>Google Maps ルート検索</h1> <p>テキストフィールドに始点と終点を入力すると、ルート検索を行います。</p> <p> 始点:<input type="text" name="start" id="start" size="12" maxlength="100"> 終点:<input type="text" name="end" id="end" size="12" maxlength="100"> </p> <p> <input type="button" value="検索" onclick="searchRoute()" /> </p> <div id="map_canvas"></div> </div> </body> </html>
《mapdrow.js》
var map; var directionsRenderer; var directions; var err = google.maps.DirectionsStatus; var directionsErr = new Array(); directionsErr[err.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。"; directionsErr[err.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。"; directionsErr[err.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。"; directionsErr[err.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。"; directionsErr[err.REQUEST_DENIED] = "ウェブページではルート サービスを使用できません。"; directionsErr[err.UNKNOWN_ERROR] = "サーバー エラーのため、ルート リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。"; directionsErr[err.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。"; //onload時の処理 function initialize() { //Google Maps初期設定 var opts = { zoom:14, center:new google.maps.LatLng(35.681382,139.766084), mapTypeId:google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas") , opts); //Google Maps作成 //ルートレンダラ生成 directionsRenderer = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: '#FF0000', strokeWeight: 4, strokeOpacity: 0.7 } }); directionsRenderer.setMap(map); //ルートレンダラにマップを関連付け } //検索開始 function searchRoute() { //textboxからの値を取得 var start = document.getElementById("start").value; var end = document.getElementById("end").value; //検索設定 directions = new google.maps.DirectionsService(); //ルート生成 //ルートリクエスト directions.route({ origin:start, //開始地点 destination:end, //終了地点 travelMode:google.maps.DirectionsTravelMode.DRIVING, //ルートタイプ(車) avoidHighways:true, //高速道路(使わない) avoidTolls:true, //有料道路(使わない) optimizeWaypoints: true, //最適化された最短距離にする。 }, function(results, status) { //ルート結果コールバック関数 if (status == err.OK) { //検索結果がtrueの場合 directionsRenderer.setDirections(results); } else { //検索結果がfalseの場合 alert(directionsErr[status]); } }); }