また新しくなったGoogle MAP、埋め込み表示の縮尺を変更する

  • はてブ

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 の地図



style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">


Google MAPを住所や建物名で表示

このままではカスタマイズに不便なので、URLを分かりやすく書き変えてみましょう。記述方法として、ジオコーディングを使用します。ふきだしを隠したり、ピンを中心からずらしたり、という小技も可能です。

srcのURL中身「maps?」以降を欲しいステータスに合わせて書き変えます。例えば、「クロスオフィス渋谷」で調べる際は、「&q=クロスオフィス渋谷」と書きます。
その後ろに出力用のおまじない「&output=embed」を繋げればクロスオフィス渋谷で検索した状態のMAPが表示されます。

<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+東京都渋谷区渋谷1丁目12−2+クロスオフィス渋谷 空白は「+」に置き変え
緯度経度 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」で検索。

森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ