By: Thomas Benkö
久しぶり…か初めてかわかりませんが(笑)ちょいと開発っぽいような話です。先日仕事でGoogle Mapにリンクを張る際にいろいろやってたので、ちょいと備忘録も兼ねてメモとして。
ページにGoogle Mapを埋め込む場合はAPIを利用するので、ピン打ちだったりとか色々とオプションを使えるのですが、普通のアンカー要素としてGoogle Mapへのリンクを貼りたい場合に、座標やら縮小倍率やらをパラメータとして渡したいなんてことがあると思います。
まぁちょっと調べれば情報は出てくるんですが、用途別にちょいとまとめてみました。API使って埋め込む際のあれこれは気が向いたらそのうち(ネタに困ったときに)記事にでもしようかなーと思います。
座標を指定する
まあ超基本ですね。Google MapのURL「http://maps.google.co.jp/」の後ろにmaps?と書いて、その後にパラメータを書いていくわけですが、一番簡単な座標指定の方法です。
https://maps.google.co.jp/maps?ll=35.669029,139.705421
[DEMO]
という具合にll=に続けて、カンマで区切って緯度・経度の順で書きます。ちなみに上記はラフォーレ原宿の地図を緯度と経度を指定した場合です。ちなみに座標取得には下記のサイトが便利だと思います。
(2017年1月23日 追記)
以前にリンクを貼っていたサイト様が閉鎖されてしまった様ですので、以下のサイト様をご紹介しておきます。
左の枠を通常・乗換案内と切り替える
Google Mapの便利な機能に「ルート・乗換案内サービス」というのがあります。通常は左の枠にある「ルート・乗換案内」ボタンをクリックして目的地への経路を探索できるのですが、これをリンクを張る際に既に開いた状態にできるパラメータです。
https://maps.google.co.jp/maps?ll=35.669029,139.705421&f=d
[DEMO]
上記のように、f=dという風に記述します。例えば店舗へのルート案内を促す場合などは、上記のように座標と組み合わせて使うことがほとんどだと思いますので、先ほどの座標指定の記述のあとに「&」と書いて複数種のパラメータを渡しています。ちなみに「f=q」だとルート・乗換案内ではない通常のモードで開かれますが、書かなくてもデフォルトが通常モードですので特に書くことは無いかも知れません。
地図表示を切り替える
ご存知の通り、GoogleMapでは通常のマップ表示以外に「航空写真」「航空写真+ラベル」「地形」といった表示モードがあります。個人的にあまり航空写真や地形の表示モードって使わないんですけど、これも下記のように記述することでパラメータを渡せます。
https://maps.google.co.jp/maps?ll=35.669029,139.705421&t=k
[DEMO]
前述の左枠モード切り替えと同じように、t=◯で書くことができます。t=m(デフォルト)・t=k(航空写真)・t=h(航空写真+ラベル)・t=p(地形)といった感じです。
ズーム倍率を指定する
もしかしたら座標指定と同じくらい使うかも知れません。0〜約20の数値で倍率を指定できます(約というのは一部地域では20以上の数値が使える場合があるらしいので)。数値が小さいほど縮小、数値が大きいほど拡大されます。
https://maps.google.co.jp/maps?ll=35.669029,139.705421&z=15
[DEMO]
上記のようにz=数値でパラメータを渡します。なお。一部地域では20まで使えない場合もあるようですので、リンクを張る際は事前に確認したほうがよさそうです。
キーワード検索の指定
もしかしたらこれが一番気軽に使える方法かも知れません。要はGoogle Mapの検索フォームで任意のキーワードを検索した際の検索結果ページを表示するものです。
https://maps.google.co.jp/maps?q=%83%89%83t%83H%81%5b%83%8c%8c%b4%8fh
[DEMO]
上記はGoogle Mapで「ラフォーレ原宿」を検索した際の検索結果へのリンクです。q=検索語句で記述します。この時に検索語句はできればエンコードしておいた方が確実性が増すと思います(そのまま検索語句を記述したら一部ちゃんと検索してくれなかったことがあるので…)。Google Mapにインデックスされている情報だったりすると、上記リンク先のようにピンがドロップされた状態で表示されます。
エンコードは下記のサイトが便利じゃないでしょうか。
http://www.tagindex.com/tool/url.html
ただ、時々かなりアバウトな検索結果や微妙にズレた結果になることもあります。多分、インデックスされているデータと検索語句がうまく噛み合わないとそうなるんでしょう。確実に場所を指定したい場合は最初に述べた緯度経度で座標指定を一緒に指定する方法がベストだと思います。
吹き出し表示-その1
APIを使ったマップ埋め込みだと任意の場所にピンを打ち込んだり吹き出し表示するのも簡単なんですが、URL上でパラメータとして渡すにはちょっと工夫が必要です。吹き出しをリンク先を開いた際に表示させておきたいときは末尾に「&iwloc=A」という記述を入れてあげると吹き出しが表示されます。
https://maps.google.co.jp/maps?ll=35.669029,139.705421&q=%83%89%83t%83H%81%5b%83%8c%8c%b4%8fh&iwloc=A
[DEMO]
吹き出し表示-その2
その1の方法で簡単に吹き出し表示をすることができるのですが、もしGoogle Map上に情報がインデックスされていない場合は、吹き出しどころかピンもドロップされません。新しくオープンした店舗だったり、なかなかインデックスされないような個人商店等の場合に使える技です。
下記は町田のライブハウス町田SDRの場合です。ラフォーレ原宿と違い、Google Map上に情報がインデックスされていませんので、店名を検索語句にしても表示されません。
https://maps.google.co.jp/maps?ll=35.547452,139.444313&q=%92%ac%93cSDR&iwloc=A
[DEMO]
上記のように座標・検索語句を入れ、さらにiwloc=Aの指定をしてもダメです。この場合は座標指定をll=で渡すのではなく、q=で検索語句として渡しつつ、同時に( )で吹き出しに表示したい語句を入れて指定します。
https://maps.google.co.jp/maps?q=35.55167,139.44014+(%92%ac%93cSDR)&iwloc=A
[DEMO]
他にも文字エンコーディングの指定だったり言語設定とか色々できるみたいですが、まあ取り敢えずこんなもんでしょうか。
ちなみに、せっかく色々とまとめたのは良いんですが、Google Map左側のメニューの中にプリンタアイコンの隣にあるコイツ
こいつをクリックすると簡単にマップのURLを発行してもらえます。
じゃ今まで書いてきたのなんだったの…ってことですが、発行されたURLは短縮URL化でもしないと色々余計なパラメータがくっついてきたりしてますし、PHPとかで何かのフォーマットにして吐き出す場合はパラメータのことも知っといた方がいいと思いますので、まー参考までに。
ついでに
これも備忘録的なことなんですが。Google Mapへのリンクを張る際に
.co.jp/
と
.com/
では検索結果が異なる場合があります。こんな感じで。
.co.jpの場合
https://maps.google.co.jp/maps?q=%83%89%83t%83H%81%5b%83%8c%8c%b4%8fh&iwloc=A
.comの場合
https://maps.google.com/maps?q=%83%89%83t%83H%81%5b%83%8c%8c%b4%8fh&iwloc=A
上記の2つの検索結果は異なります。気をつけないとアレ~なんて事になりかねませんね。
[追記 2013.05.17]
久しぶりに見たら.co.jpと.comの結果の違いが無くなっていました。修正したっぽいですね。