[Labyrinthe Noir]>[Top]>[HTMLタグ講座]>

Google Mapsを使ってみよう

Google Mapsを制御する方法はいくつか用意されています。
JavaScript(Ajax)のAPIを使って動的に制御をしてサービスを作り上げることもできますが、スクリプトを使わずにURLを指定して地図を貼り付けることでも利用できます。
Google MapsのURLには、地図を制御するためのパラメータ(検索クエリ?)が含まれており、それらを直接変更することで地図をカスタマイズすることができます。

HTMLファイルからは、URLをリンクとして開くか、iframeタグを使ってページ内に取り込むことができます。
また、FileMakerでもURLを指定してデータベースにブラウザ表示を組み込むことができます。

Google Mapsの表示

まずはこちらで地図の検索をしてみましょう。

検索結果には次のような表示の特徴があります。まずは、これらの表示を制御したいと考えました。

1.情報パネル。検索結果を地図の左に表示するフレーム。
2.マーカー。検索結果を地図上に表示するマーカー。
3.情報ウィンドウ。地図内のマーカーに情報を表示する。

また、これらの他に、地図の種類や大きさも制御する必要があります。

情報パネル

情報パネルには検索結果が表示されるだけでなく、印刷やリンク用のURLを取得するボタンも用意されています。
このリンク用のURLを取得することで簡単に地図をHTML内に貼り付けて、リンク先として呼び出すことができます。このURLに使われているパラメータを知ることで、様々なパターンの地図を表示することができます。

iframeで地図をHTML内に埋め込む場合は、この情報パネルは地図の情報量を減らすため邪魔になります。これをパラメータで除去することも可能です。

マーカー

検索結果を地図上に表示するマーカーです。マーカーには二種類あり、Aからアルファベットで表示されるものと、ただの下向き矢印で表示される場合です。
アルファベットのマーカーをここではAマーカーと呼びましょう。Aマーカーは、地名など検索文字列を使って検索した場合に表示されるものです。
これに対し、矢印マーカーは、緯度と経度を使って検索をしたときに表示されます。また、このとき近くの対象にAマーカーが表示されます。

マーカーがあることで何を指し示しているかが判りますが、一般的に広範囲な場所を示す場合には地図の地名が見えることで十分ですし、マーカーを消したい場合があります。

情報ウィンドウ

情報ウィンドウはマーカーをクリックすると表示されます。情報パネルがない場合は、その代替としてクリックしなくても表示されます。

この情報ウィンドウも地図を埋め込むと邪魔になってしまいますので、表示をしないようにしたい場合があります。

URLパラメータ

幾つか確認できたパターンから、URLパラメータを使って地図がどのように表示されるか見てみましょう。

通常リンクをクリックするとGoogle Mapsの画面が新しいウィンドウ(タブ)で開きます。
iframe用のリンクでは、「output=embed」というパラメータを使って、情報パネルを消して地図だけを表示しています。

↓:矢印マーカー表示 A:Aマーカー表示 W:情報ウィンドウ表示
パラメータ 通常リンク 特徴 iframe用 解説
情報パネル f=q http://maps.google.co.jp/maps?f=q       デフォルトの情報パネル
f=d http://maps.google.co.jp/maps?f=d       ルート検索のフォーム
検索 q=検索文字列 http://maps.google.co.jp/maps?q=滋賀県庁   A     A W 文字列で検索
q=緯度,経度 http://maps.google.co.jp/maps?q=35.004212,135.869105 A   A   座標と近くの建物に2つのマーカー
q=loc:緯度,経度 http://maps.google.co.jp/maps?q=loc:35.004212,135.869105   A     A W 座標にマーカーを表示
q=文字列@緯度,経度 http://maps.google.co.jp/maps?q=滋賀県@35.004212,135.869105   A     A W 情報ウィンドウに指定の文字列
情報ウィンドウ iwloc=A http://maps.google.co.jp/maps?q=loc:35.004212,135.869105&iwloc=A   A W   A W 情報ウィンドウを表示
iwloc=J http://maps.google.co.jp/maps?q=loc:35.004212,135.869105&iwloc=J   A     A   Aマーカーのみ表示
中心点 ll=緯度,経度 http://maps.google.co.jp/maps?ll=35.004212,135.869105     座標を地図の中心点に指定
qと組み合わせ可
http://maps.google.co.jp/maps?ll=35.004212,135.869105&q=大津駅   A     A W
範囲指定 spn=緯度,経度 http://maps.google.co.jp/maps?ll=35.004212,135.869105&spn=0.01,0.01     緯度経度で表示範囲を指定
zと一緒に使わないこと
http://maps.google.co.jp/maps?ll=35.004212,135.869105&spn=0.1,0.1    
縮尺 z=数値 http://maps.google.co.jp/maps?ll=35.004212,135.869105&z=2     数値は0~22
0が最小、22が最大ズーム
http://maps.google.co.jp/maps?ll=35.004212,135.869105&z=10    
http://maps.google.co.jp/maps?ll=35.004212,135.869105&z=18    
言語 hl=言語 http://maps.google.co.jp/maps?ll=48.860967,2.336118&hl=us     usは英語
http://maps.google.co.jp/maps?ll=48.860967,2.336118&hl=fr     frは仏語
http://maps.google.co.jp/maps?ll=48.860967,2.336118&hl=ja     jaは日本語
表示 t=m (市街地図) http://maps.google.co.jp/maps?ll=35.004212,135.869105&t=m     市街地図
t=k (航空写真) http://maps.google.co.jp/maps?ll=35.004212,135.869105&t=k     航空写真
t=h (地図+写真) http://maps.google.co.jp/maps?ll=35.004212,135.869105&t=h     航空写真に市街地図を重ねたもの
t=e (Google Earth) http://maps.google.co.jp/maps?ll=35.004212,135.869105&t=e     Google Earthのプラグインが必要です
t=8 (エイプリルフール) http://maps.google.co.jp/maps?ll=35.004212,135.869105&t=8     エイプリルフール限定地図
t=p (地形図) http://maps.google.co.jp/maps?ll=35.004212,135.869105&t=p     地形図
出力 output=embed iframe用リンク参照(通常リンクの後ろに付けています)       情報パネルを非表示

qとllを併用して、llで中心点を決め、qでマーカーの位置を別に定めます。
qとzを組み合わせる場合、2~14が指定可能な範囲です。zを省略するとz=14がデフォルト表示です。

エイプリルフール限定地図は、2012年はドラクエ風のぼうけん地図、2013年は宝探し地図でした。

緯度・経度の取得方法

Google Mapsの画面から緯度・経度を数値だけ取り出す方法とリンクとして取り出す方法があります。
地図の中心となる緯度と経度を参照します。

数値を取得

地図の中で右クリックしてショートカットメニューを表示します。「この場所について」を選ぶと、その位置に緑のマーカー(矢印)が現れますので、それをクリックすると小数点以下6桁までの数値が2つ表示されます。これが緯度と経度です。

リンクを取得

地図を必要な大きさで表示し、中心を決めます。地図内で右クリックして「ここを地図の中心にする」を選びます。
画面左の情報エリアにリンクのアイコンがありますので、これをクリックするとリンク用のURLと埋め込み用の<iframe>タグを取得することができます。
このリンクには緯度・経度だけでなく地図の縮尺や表示の種類も含まれています。

参考サイト

mapki - Google Map Parameters

インラインフレームに表示

<iframe>タグを使うことで画面内に別のページを組み込んで表示します。
Google Maps のURLにパラメータを組み合わせて設定し、画面のパターンを選択して表示することができます。

<iframe>タグの書式

タグ <iframe></iframe> 属性 src リンク先のURL
width インラインフレームの横幅
height インラインフレームの高さ
<iframe src="http://maps.google.co.jp/maps?q=滋賀県庁&output=embed" width="300" height="200"></iframe>

表示の比較

URLは「http://maps.google.co.jp/maps?○○○&output=embed」という形式になります。

検索文字列 緯度・経度を指定(マーカーあり) 緯度・経度を指定(マーカーなし)
q=滋賀県庁 q=loc:35.004212,135.869105&iwloc=J ll=35.004212,135.869105

切替表示サンプル

<iframe>タグを切り替えて表示するサンプルです。URLのリンクをクリックすると右のフレーム内の地図が切り替わります。

パラメータ URL 特徴 Google Maps
検索 q=検索文字列 q=滋賀県庁   A W
q=緯度,経度 q=35.004212,135.869105 A  
q=loc:緯度,経度 q=loc:35.004212,135.869105   A W
q=文字列@緯度,経度 q=滋賀県@35.004212,135.869105   A W
情報ウィンドウ iwloc=A q=loc:35.004212,135.869105&iwloc=A   A W
iwloc=J q=loc:35.004212,135.869105&iwloc=J   A  
中心点 ll=緯度,経度 ll=35.004102,135.866246  
ll=緯度,経度&q=文字列 ll=35.004102,135.866246&q=大津駅   A W
範囲指定 spn=緯度,経度 ll=35.004212,135.869105&spn=0.01,0.01  
ll=35.004212,135.869105&spn=0.1,0.1  
縮尺 z=数値 ll=35.004212,135.869105&z=2  
ll=35.004212,135.869105&z=10  
ll=35.004212,135.869105&z=18  
言語 hl=言語 ll=35.004212,135.869105&hl=us  
ll=35.004212,135.869105&hl=fr  
ll=35.004212,135.869105&hl=ja  
表示 t=m (市街地図) ll=35.004212,135.869105&t=m  
t=k (航空写真) ll=35.004212,135.869105&t=k  
t=h (地図+写真) ll=35.004212,135.869105&t=h  
t=8 (ぼうけん) ll=35.004212,135.869105&t=8  
t=p (地形図) ll=35.004212,135.869105&t=p  
     

その他の地図API

地図サービスページで公開されているAPIを紹介します。

サービス名 APIのページ 特徴
Yahoo!地図 Yahoo! Open Local Platform WEB用にJavaScriptを使ったAPIとJS不要のAPIがある。スマホ用も提供されている。
     

戻る