佐賀のホームページ制作なら株式会社イン・ザ・コム

【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法

GoogleMapをレスポンシブサイトに埋め込む方法

GoogleMapはほとんどのサイトに設置してあって、スマートフォンからでも簡単に見れて分かりやすい。

埋め込みはiframeを使うのでレスポンシブに適用させるためにはレスポンシブ用のCSSが必要です。

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

トップページにいって、表示したい住所を打ち込み、右下の「地図を共有/埋め込む」をクリック

Googlemap1_1

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

Googlemap2_1

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

まずdivでiframeを囲みます。

HTML

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

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%;
}

で、こんな感じになります。

この記事が気に入ったら
いいね!しよう

Twitter で

関連する記事

Copyright © IN THE COM .inc All rights recerved.