企業サイトには必須のマップ。GoogleMapで検索したら「共有」をクリックして「地図を埋め込む」タブを選びサイズ選択。「HTMLをコピー」をクリックしてコピーして埋め込む場所にペーストすれば完了。簡単だ。

そのままコピペしたままだと幅600pxの縦450pxのみになるので画面サイズが変わっても縮小拡大されない。サイズ部分を幅100％にすることで幅は伸縮するが高さが変わらないまま。

レスポンシブ対応させるには以下タグとスタイルシートを設定。地図が拡大縮小されるのではなく表示される部分を拡大縮小しているだけになる。画面比率はお好みで幅100％に対しての縦幅をpadding-bottom:に設定する。

<div class="ggmap">
<!-- ここにGoogleMap共有からHTMLコードをペースト -->
</div>

GoogleMapの<iframe>内の設定で目的地が地図の中央に表示する設定になっていると思われる。<iframe>の縦横100％表示に設定すると画面全体に表示されることになる。<div class=”ggmap”>で高さ比率を指定して切り取って表示させている感じ？かな。このあたりは厄介だ。これで縦横比率を維持したままで縮小するようになる。

.ggmap {
height: 0;
overflow: hidden;/*はみ出た部分を隠せ*/
padding-bottom: 50%;/*表示させる高さの比率を設定*/
position: relative;/*相対位置指定*/
}
.ggmap iframe {
position: absolute;/*絶対位置*/
left: 0;
top: 0;
height: 100%;
width: 100%;
}