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にしています。かなり見栄えが変わりますね。
まとめ
指定できるオプションが広がることで、表示させる地図の自由度が格段と広がります。実装サイトのデザインや要望に合わせて適切な機能で地図を実装しましょう。