2014年11月16日

Google mapをレスポンシブ対応でWEBサイトに埋め込む方法

前記事で書いたように、
新人監督映画祭での上映が決まった『メテ乙女』、
特設サイトにGoogle mapを埋め込んでみた、now!!!

やはり、
閲覧者にとって、
会場の場所の詳細が最も気になるPOINTの１つだと思うので、
住所だけ掲載しておくよりも、地図も掲載しておけば、
視覚的に一発で分かり、
当日もサイト見ながら行きやすいかと。

レスポンシブ設定で埋め込んだので、
↑冒頭のPHOTOのように、
PC、スマホ、それぞれの画面で最適化されて表示できている。

参考までに「Google mapをレスポンシブ対応でWEBサイトに埋め込む方法」
を下記に掲載しておく。

まず、
Google mapにて目的地の住所を入力し、

↑画面右下の設定ボタン（ネジみたいなマーク）をClickし、
POP UP表示された画面にて、
「地図を埋め込む」タブをClickすると、、
iFrameのCodeが表示されるので、
Copy！

で、
WEBサイトのHTML CodeにPaste.

その際、
このiFrame codeに「Div」指定しておく。
私の場合は、
<div class="ggmap">●●●</div>
で囲んだ。

続いて、
CSS設定。