Google MAPのインターフェースが一新されたのも記憶に新しいかと思います。その後も各種機能がハンバーガーメニューになったりと、度々変更が加えられておりましたが、気がつくと、GoogleMAPの「マップの埋め込み」機能も少々勝手が変わっていました。
URLが見慣れない形に
通常のGoogle MAPを開き、住所や建物名で検索し、「共有」から「地図の埋め込み」でマップを自分のサイトへ張るためのソースコードが取得出来ます。ここまでは今まで通りですね。下記は当社の位置表示なのですが、srcに吐き出されるURLが以前と変わっています。引数が「!」で区切られ、見慣れない形へと変化。眺めていると、なんとなく緯度経度らしきものがあることが分かります。
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.69346665625!2d139.70235538581707!3d35.659923229244505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b587b28bca9%3A0xad2f9ce323ad0331!2z44CSMTUwLTAwMDIg5p2x5Lqs6YO95riL6LC35Yy65riL6LC377yR5LiB55uu77yR77yS4oiS77ySIOOCr-ODreOCueOCquODleOCo-OCuea4i-iwtw!5e0!3m2!1sja!2sjp!4v1456451081274” width=”400″ height=”300″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
そのうち縮尺の引数は、下記の「13.1」の箇所にあります。上限と下限は分かりませんが（大体1～180程？）、こちらの数字を変更すると縮尺の変更が可能です。
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.69346665625!2d139.70235538581707!3d35.659923229244505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b587b28bca9%3A0xad2f9ce323ad0331!2z44CSMTUwLTAwMDIg5p2x5Lqs6YO95riL6LC35Yy65riL6LC377yR5LiB55uu77yR77yS4oiS77ySIOOCr-ODreOCueOCquODleOCo-OCuea4i-iwtw!5e0!3m2!1sja!2sjp!4v1456451081274″ width=”400″ height=”300″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
数字を大きくすればするほど引きの地図になります。
▼デフォルト 13.1 の地図
▼ 1 の地図
▼ 80 の地図
Google MAPを住所や建物名で表示
このままではカスタマイズに不便なので、URLを分かりやすく書き変えてみましょう。記述方法として、ジオコーディングを使用します。ふきだしを隠したり、ピンを中心からずらしたり、という小技も可能です。srcのURL中身「maps?」以降を欲しいステータスに合わせて書き変えます。例えば、「クロスオフィス渋谷」で調べる際は、「&q=クロスオフィス渋谷」と書きます。
その後ろに出力用のおまじない「&output=embed」を繋げればクロスオフィス渋谷で検索した状態のMAPが表示されます。
|
1 |
<iframe width="600" height="180" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?&q=クロスオフィス渋谷&output=embed"></iframe> |
<iframe src=”http://maps.google.co.jp/maps?&q=クロスオフィス渋谷&output=embed” width=”400″ height=”300″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
また、「&q=」は、検索文字列の扱いなので、住所以外にも緯度経度で貼りつけることも可能です。
| 文字列検索 | q=〒150-0002+東京都渋谷区渋谷１丁目１２−２+クロスオフィス渋谷 | 空白は「+」に置き変え |
|---|---|---|
| 緯度経度 | q=35.660307,139.703428 | 緯度経度の間に「,」 |
その他のステータスの引数は以下になります。欲しいオプションを「&」で区切って繋げてください。最後に出力の「&output=embed」を忘れずに。
| 縮尺 | z=18 | 0～23 |
|---|---|---|
| 地図の中心点 | ll=35.660307,139.703428 | 緯度と経度の間に「,」 ピンの位置を画面中央からずらすことができます※1 |
| 吹き出し | iwloc=A | A…表示 B…非表示 |
| 表示モード | t=m | m…地図 k…航空写真 h…地図+航空写真 p…地形図 e…Google Earth |
| 言語 | hl=ja | ja…日本語 us…英語 zh-CN…中国語簡 zh-TW…中国語繁 ko…韓国語 th…タイ語※2 |
※1…地図上で右クリックし、「この場所について」を選択すると、地点の緯度経度を調べることができます
※2…他の言語が必要な場合は「GoogleMap hl」で検索。
