【CSS】Googleマップの埋め込み用HTMLコードをレスポンシブに対応させる

Googleマップで、埋め込み用HTMLコードを発行して、ブログやサイトに貼り付けて使うことがよくあると思います。

サイトがレスポンシブ対応の場合、本文中のGoogleマップが、要素からはみ出して見栄えが崩れたり、案内したい所在地のポインタが表示されないということがあります。

responsive-google-map-no-good

Googleマップの埋め込み用HTMLコードは「iframe」形式になっており、表示する「横幅:width」「高さ:height」が指定されています。標準ではpx単位なので、そのままHTMLコードを貼り付けると固定値のため、レスポンシブには対応せずに表示が崩れてしまう原因になります。

responsive-google-map-customized

それでは、Googleマップの埋め込み用HTMLコードのカスタマイズ画面で調整してみようと思って幅に「100%」を入力したら・・・反映されませんでした・・・。

responsive-google-map-customized-02

ブログなどの投稿エディターに貼り付けをしてから、幅を変更するしかなさそうです。

responsive-google-map-html-code

CSSを用いたGoogleマップのレスポンシブ化

HTMLコードの横幅を直接編集して調整もできますが、CSSで指定しておくことでレスポンシブ化することもできます。

responsive-google-map-html-code-02

Googleマップを <div class=”googlemap”>~</div> で囲みCSSを追加しておきます。

.googlemap iframe,
.googlemap object,
.googlemap embed {
    height: auto;
    max-width: 100%;
}

親要素からGoogleマップの横幅が超える場合、100%に調整して表示されるようになります。

responsive-google-map-02

関連記事

【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法

WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。 { margin: 0 auto...続きを読む

2015.02.07HTMLコーディング

【デザイン】フォトグラファーポートフォリオサイト

今回は、フォトグラファーのポートフォリオサイトを集めてみました。サイトごと写真の見せ方に工夫がありますね。 http://www.vivienneballa.com/ Link:http://www.vivienneballa.com/ http://w...続きを読む

2015.02.15インスピレーション

【WP】プラグイン『Photospace』の利用方法

以前に紹介をした『Photospace』は、jQueryのサムネイル付のスライドショーギャラリーを実装できる「Galleriffic」を、WordPressの標準ギャラリーのショートコードに対応させることができるプラグインです。インストールと標準設定をご紹介しましたが、今回は...続きを読む

2015.06.29WordPress

【フォト】冒険と遊びの喫茶店 らみぃ

藤枝駅の近くにある冒険と遊びの喫茶店「らみぃ」に行ってきました。ボードゲームが遊べるプレイスペースで、並んでいるボードゲームをみるとワクワクします。 アナログゲームをじっくりと遊ぶことができるお店、はじめていきましたが、楽しい時間を過ごせてとても充実した時間を過ごせました!...続きを読む

2018.02.22フォトギャラリー藤枝

森のなかま藤枝様WEBサイトの制作

ペレットストーブ・木質燃料の販売の「森のなかま藤枝」様のWEBサイトの制作いたしました。 ペレットショップ「森のなかま」は、2002年から地域の環境や自然、森林、エネルギーに関わる仲間があつまり活動してきた「静岡森林エネルギー研究会」の店舗として2015年に浜松市天竜区に開...続きを読む

2018.11.30WEBサイト制作