【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

関連記事

【デザイン】写真加工による幻想的なアートの世界

実際の写真を加工して幻想的で不可思議な世界を作るフォトグラファー Erik Johansson 氏の作品をご紹介します。 Erik Johansson Photographer Erik Johansson ...続きを読む

2015.03.10インスピレーション

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

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

2018.02.22フォトギャラリー藤枝

【WP】カテゴリーやタグにサムネイルを反映するプラグイン「Taxonomy Thumbnail」

WordPressでサイトを構築して、記事を投稿するとき「カテゴリー」や「タグ」をつけることができます。一般的に「カテゴリー」や「タグ」にはテキストを設定して、表示もテキストを中心にしたものが多く、装飾などはCSSや画像を組み合わせて表現していることが多いと思います。 今回...続きを読む

2016.07.02WordPress

【JavaScript】各種ユーザーインターフェイスを実装するライブラリ『jQuery UI』

『jQuery UI 』は一般的なメニュー、アコーディオン、タブなどの多岐にわたるユーザーインターフェイスを実装することができるjQuery対応のJavaScriptライブラリです。 jQuery UI 『jQuery UI 』を用いることで「Interactions...続きを読む

2015.02.10HTMLコーディング

Google ChromeでSSL化(暗号化)されていないページを閲覧すると警告表示がされます

2018年7月から最新のGoogle Chrome ブラウザを使用して、WEBサイト(ホームページ)を閲覧すると、SSL化されていないページでは、「保護されていません/保護されていない通信」という警告文が表示されるようになりました。Google が「保護されたウェブの普及を目指し...続きを読む

2018.08.18SSLWEB