2014年11月16日
前記事で書いたように、
新人監督映画祭での上映が決まった『メテ乙女』、
特設サイトにGoogle mapを埋め込んでみた、now!!!
やはり、
閲覧者にとって、
会場の場所の詳細が最も気になるPOINTの1つだと思うので、
住所だけ掲載しておくよりも、地図も掲載しておけば、
視覚的に一発で分かり、
当日もサイト見ながら行きやすいかと。
レスポンシブ設定で埋め込んだので、
↑冒頭の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設定。
↑こんな感じで、記載。
これで、OK!!!
表示結果は、
こちらでご覧ください♪
>> >> http://www.groovester.net/meteo_fes.html