2018.07.30

コーディング

Google Mapsのiframeを住所で埋め込むジオコーディングの方法

地球儀のイメージ

Google Mapsをサイトに埋め込むとき、ifrmeの埋め込みコードをGoogle Mapsのサイトから発行して実装することがあると思います。このGoogle Mapsは埋め込みサイズは制御できますが、吹き出しのオンオフや中心座標の調節などはできません。
ですがGoogle Mapsにはコードやプロパティを手動で設定することで上記のオプションや追加機能を備えた埋め込み地図を作ることができます。今回はその埋め込みGoogle Mapsの使用方法を紹介します。

ジオコーディングが使えるGoogle Mapsの構成

基本のコードは以下のようになります。SSLの指定は実装サイトにあわせて編集してください。

<iframe src="https://maps.google.co.jp/maps?output=embed&q=大阪駅&z=16" width="600" height="400" frameborder="0" scrolling="no" ></iframe>

表示例

ここへオプションを追記することができます。追記できるオプションは以下です。

q=:住所の指定
文字列や緯度経度の数値で地図の座標を指定できます。
ll=:地図の中心位置
緯度経度の数値で地図の表示上の中心を指定できます。
t=:表示モード
表示モードを切り替えられます。
t=m:地図
t=k:航空写真
t=h:地図+航空写真
t=p:地形図
t=e:Google Earth
z=:地図の縮尺
0から23までの整数で地図の拡大率を指定できます。

これらを実装してみた例が以下になります。

住所を大阪駅で検索し、地図の中心をやや東にずらし、表示モードをgoogle Earthに、拡大率を17にしています。かなり見栄えが変わりますね。

まとめ

指定できるオプションが広がることで、表示させる地図の自由度が格段と広がります。実装サイトのデザインや要望に合わせて適切な機能で地図を実装しましょう。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する