Google Mapsの埋め込み・小技まとめ

  javascript , , ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
google map タイトル

2回にわたって、会社やお店などの所在地を表すために多くのサイトで使用されているGoogle Mapsの埋め込みから使い方・オプション・小技を扱っていきたいと思います。第1回目はGoogle Mapsの埋め込み・オプションなどをご紹介したいと思います。

Google Mapsの埋め込み方法

google map 埋め込み
上の画像のような名古屋駅を例にしてGoogle Mapの埋め込み方法をご紹介していきたいと思います。

google map 埋め込み 方法
まず上の画像のように、Google Mapsへアクセスして埋め込みたい場所の地図を表示させ、右下にある歯車をクリックして「地図を共有または埋め込み」を選択します。このとき、縮尺や表示モードを任意のものにして埋め込みを行うように注意してください。

リンクを共有して埋め込む場合

google map 埋め込み リンク
リンクで埋め込む場合、上の画像のURLをコピーし、貼りつけたい先に埋め込む。

埋め込みコード

<a href="https://www.google.co.jp/maps/place/%E5%90%8D%E5%8F%A4%E5%B1%8B%E9%A7%85/@35.1705219,136.8822354,17z/data=!3m1!4b1!4m2!3m1!1s0x600376e794d78b89:0x81f7204bf8261663">名古屋駅</a>

埋め込みサンプル

名古屋駅

地図を埋め込む場合

google map 埋め込み 地図
地図で埋め込む場合、上の画像のiframeコードをコピーし、貼りつけたい先に埋め込む。

埋め込みコード

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3261.4425090625195!2d136.88223540000004!3d35.170521900000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600376e794d78b89%3A0x81f7204bf8261663!2z5ZCN5Y-k5bGL6aeF!5e0!3m2!1sja!2sjp!4v1433317763525" width="600" height="450" frameborder="0" style="border:0"></iframe>

埋め込みオプション

iframeタグで地図を埋め込む際に設定できるオプションについて下記に示したいと思います。任意のオプションを設定してください。

オプション設定 オプション詳細 デフォルト
src=”https://www.google.com/maps/embed?pb=!~” 埋め込むマップの情報 任意
width=”600″ 埋め込むマップの横幅 600
height=”450″ 埋め込むマップの縦幅 450
frameborder=”0″ フレームの境界線 0
style=”border:0″ フレームの境界線 0

埋め込みサンプル

Google Mapsを住所で埋め込む場合(ジオコーディング)

iframe内に住所を直接埋め込む方法をご紹介したいと思います。少しオプションを多く設定できます。任意のオプションを設定してください。

ジオコーディングの埋め込みコード

<iframe width="600" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?ll=35.170694,136.88163699999995&q=名古屋駅&output=embed&t=m&z=16"></iframe>

埋め込みオプション

iframeタグのsrc内に設定できるオプションについて下記に示したいと思います。任意のオプションを設定してください。

オプション設定 オプション詳細 オプション種類
q=名古屋駅 住所 任意
z=14 地図の縮尺 最小0-最大23
ll=35.170694,136.88163699999995 座標を地図の中心点に指定 緯度,経度
iwloc=A 吹き出し A:情報ウインドウ表示
J:マーカーの表示
B:非表示
hl=ja 言語 us:英語
fr:仏語
ja:日本語
t=m 表示モード m:地図
k:航空写真
h:地図+航空写真
p:地形図
e:Google Earth
output=embed 出力 embed

iframeタグで地図を埋め込む際に設定できるオプションについて下記に示したいと思います。任意のオプションを設定してください。

オプション設定 オプション詳細 デフォルト
src=”http://maps.google.co.jp/maps?~” 埋め込むマップの情報 任意
width=”600″ 埋め込むマップの横幅 600
height=”450″ 埋め込むマップの縦幅 450
frameborder=”0″ フレームの境界線 0
marginwidth=”0″ フレームの左右のマージン 0
marginheight=”0″ フレームの上下のマージン 0

iframeタグで地図を埋め込む住所を設定する種類を下記にご紹介したいと思います。任意の種類で住所を設定してください。

オプション設定 オプション詳細 オプション設定例
q=検索文字列 文字列で検索 q=名古屋駅
q=緯度,経度 座標と近くの建物に2つのマーカー q=35.170694,136.88163699999995
q=loc:緯度,経度 座標にマーカーを表示 q=loc:35.170694,136.88163699999995
q=文字列@緯度,経度 情報ウィンドウに指定の文字列 q=名古屋駅@35.170694,136.88163699999995

埋め込みサンプル

埋め込みサンプルはGoogle Mapsの緯度・経度の検索を用いて名古屋駅の住所を設定しました。

次回、Google Maps API「gmaps.js」を用いた方法についてご紹介したいと思います。

SNSでもご購読できます。

コメントを残す

*