Google Mapsを制御する方法はいくつか用意されています。
JavaScript（Ajax）のAPIを使って動的に制御をしてサービスを作り上げることもできますが、スクリプトを使わずにURLを指定して地図を貼り付けることでも利用できます。
Google MapsのURLには、地図を制御するためのパラメータ（検索クエリ？）が含まれており、それらを直接変更することで地図をカスタマイズすることができます。
HTMLファイルからは、URLをリンクとして開くか、iframeタグを使ってページ内に取り込むことができます。
また、FileMakerでもURLを指定してデータベースにブラウザ表示を組み込むことができます。
まずはこちらで地図の検索をしてみましょう。
検索結果には次のような表示の特徴があります。まずは、これらの表示を制御したいと考えました。
１．情報パネル。検索結果を地図の左に表示するフレーム。
２．マーカー。検索結果を地図上に表示するマーカー。
３．情報ウィンドウ。地図内のマーカーに情報を表示する。
また、これらの他に、地図の種類や大きさも制御する必要があります。
情報パネルには検索結果が表示されるだけでなく、印刷やリンク用のURLを取得するボタンも用意されています。
このリンク用のURLを取得することで簡単に地図をHTML内に貼り付けて、リンク先として呼び出すことができます。このURLに使われているパラメータを知ることで、様々なパターンの地図を表示することができます。
iframeで地図をHTML内に埋め込む場合は、この情報パネルは地図の情報量を減らすため邪魔になります。これをパラメータで除去することも可能です。
検索結果を地図上に表示するマーカーです。マーカーには二種類あり、Aからアルファベットで表示されるものと、ただの下向き矢印で表示される場合です。
アルファベットのマーカーをここではAマーカーと呼びましょう。Aマーカーは、地名など検索文字列を使って検索した場合に表示されるものです。
これに対し、矢印マーカーは、緯度と経度を使って検索をしたときに表示されます。また、このとき近くの対象にAマーカーが表示されます。
マーカーがあることで何を指し示しているかが判りますが、一般的に広範囲な場所を示す場合には地図の地名が見えることで十分ですし、マーカーを消したい場合があります。
情報ウィンドウはマーカーをクリックすると表示されます。情報パネルがない場合は、その代替としてクリックしなくても表示されます。
この情報ウィンドウも地図を埋め込むと邪魔になってしまいますので、表示をしないようにしたい場合があります。
幾つか確認できたパターンから、URLパラメータを使って地図がどのように表示されるか見てみましょう。
通常リンクをクリックするとGoogle Mapsの画面が新しいウィンドウ（タブ）で開きます。
iframe用のリンクでは、「output=embed」というパラメータを使って、情報パネルを消して地図だけを表示しています。
| ↓：矢印マーカー表示 | A：Aマーカー表示 | W：情報ウィンドウ表示 |
qとllを併用して、llで中心点を決め、qでマーカーの位置を別に定めます。
qとzを組み合わせる場合、2～14が指定可能な範囲です。zを省略するとz=14がデフォルト表示です。
エイプリルフール限定地図は、2012年はドラクエ風のぼうけん地図、2013年は宝探し地図でした。
Google Mapsの画面から緯度・経度を数値だけ取り出す方法とリンクとして取り出す方法があります。
地図の中心となる緯度と経度を参照します。
地図の中で右クリックしてショートカットメニューを表示します。「この場所について」を選ぶと、その位置に緑のマーカー（矢印）が現れますので、それをクリックすると小数点以下6桁までの数値が２つ表示されます。これが緯度と経度です。
地図を必要な大きさで表示し、中心を決めます。地図内で右クリックして「ここを地図の中心にする」を選びます。
画面左の情報エリアにリンクのアイコンがありますので、これをクリックするとリンク用のURLと埋め込み用の<iframe>タグを取得することができます。
このリンクには緯度・経度だけでなく地図の縮尺や表示の種類も含まれています。
mapki - Google Map Parameters
<iframe>タグを使うことで画面内に別のページを組み込んで表示します。
Google Maps のURLにパラメータを組み合わせて設定し、画面のパターンを選択して表示することができます。
| タグ | <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のページ | 特徴 |
|---|---|---|
| Yahoo!地図 | Yahoo! Open Local Platform | WEB用にJavaScriptを使ったAPIとJS不要のAPIがある。スマホ用も提供されている。 |