カテゴリ:

GoogleMapはほとんどのサイトに設置してあって、スマートフォンからでも簡単に見れて分かりやすい。この埋め込みはiframeを使うので、レスポンシブに適用させるためにはレスポンシブ用のCSS設定が必要です。


css-tips



新しいGoogleMapを埋め込んでみよう!


001


表示したい住所を打ち込み地図を出したら、左の再度パネルの一番上「三マークのメニュー」から「地図を共有/埋め込む」をクリックします。

002

「地図を埋め込む」のタブをクリックして、iframeコードをコピーしてサイトの表示したい場所に埋め込むだけです。

GoogleMapをレスポンシブサイトに対応させてみよう!

まずdivでiframeを囲みます。

HTMLの打ち込み

<div class="ggmap">iframeのコピーしたコード</div>


CSSに追加

下記をサイトで使っているCSSに追加します。

.ggmap {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

}

 

.ggmap iframe,

.ggmap object,

.ggmap embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}



これで設定が終わりです。下に記述している

width: 100%;

height: 100%;


については、幅いっぱいに地図が出ますのでパーセンテージを調整してあげても構いません。
以上、簡単にグーグルマップをレスポンシブにする方法の紹介でした。

最後までお読みいただきまして、本当にありがとうございました♪