Google Maps API を使う
Static MAP API 〜シンプルな地図画像表示〜
・JavaScriptをつかわない、シンプルな画像を簡単に埋め込む方法
[Googole Static Maps APIのURL]↓
http://maps.google.com/maps/api/staticmap?parameters
緯度 /南北（latitude） ＝「lat」
経度 /東西（longitude） ＝「lng」「lon」
＜パラメーター＞
center:表示させる地図の真ん中
zoom:表示させる拡大率(整数で入力）
size:表示させる地図の大きさ
「緯度」「経度」を検索する
Googlecoding住所やランドマーク名から経度、緯度を検索してXML形式で返します。
■ Geocoding API 仕様
HTTP Request Method は GET
リクエスト送信先は http://www.geocoding.jp/api/
必要なパラメータは１つだけ q=住所やランドマーク名称など
TOKYO97風の座標が必要な場合は d=tokyo をつけて
検索結果の検証が必要な場合は v=1.1 をつけて（2006年8月4日追加）
リクエスト送信時の文字コードは UTF-8 にしてください
検索結果のXMLの文字コードは UTF-8 です
XMLのフォーマット種類は ３種類（成功時、重複時、エラー時）
具体的な使い方はWeb API実践リファレンスブックを参考にしてください。
表示させる
http://maps.google.com/maps/api/staticmap?center=<緯度>,<軽度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦幅>&sensor=<ユーザーの位置情報取得センサーの使用の有無>
「渋谷ヒカリエ」をgoogleCordingで検索
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Map Test</title> </head> <body> <a href="http://maps.google.com/maps/api/staticmap?center=35.701055,139.74202&zoom=18&size=320x480&maptype=roadmap&sensor=false">マップで見る</a> </body> </html>
GoogleMaps API VER3 をつかって表示させる
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps API</title> <!-- 【１】Google Maps APIを呼び出し--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <!-- 【2】どんな地図を描くかのメイン処理 --> <script type="text/javascript"> // ■地図初期化し表示 function initialize() { // ■地図を表示する緯度経度を指定する var latlng = new google.maps.LatLng(35.681382,139.766084); // ■地図必須プロパティを設定 var myOptions = { // ■ズームレベルの指定 0〜17 zoom: 14, // ■地図の中心を指定（上記で設定の緯度経度latlng） center: latlng, // ■地図のタイプ設定 // ROADMAP：デフォルト、SATELLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル mapTypeId: google.maps.MapTypeId.ROADMAP };// 地図プロパティここまで // ■<div id="map_canvas">と結びつけて、その領域に地図を描く var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // ■中心にマーカーの表示 var marker1 = new google.maps.Marker({ position: latlng, title:"東京駅" }); marker1.setMap(map); // ■マーカーの追加表示（緯度経度指定の場合） var myLatlng = new google.maps.LatLng(35.6853438,139.7530782); var marker2 = new google.maps.Marker({ position: myLatlng, title:"皇居" }); marker2.setMap(map); // ■マーカーをクリックしたら、情報ウィンドウを表示 var marker1text = 'ここは<span style="color:#f00;">東京駅</span>です' var infowindow1 = new google.maps.InfoWindow({ content: marker1text, maxWidth:200 }); google.maps.event.addListener(marker1, 'click', function() { infowindow1.open(map,marker1); }); var marker2text = 'ここは<span style="color:#f00;">皇居</span>です' var infowindow2 = new google.maps.InfoWindow({ content: marker2text, maxWidth:200 }); google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map,marker2); }); }//initialize() </script> </head> <body onload="initialize()"> <!-- 地図はここに描画される --> <div id="map_canvas" style="width: 640px; height: 480px;"></div> </body> </html>
