スタッフブログ

Googleマップのデフォルトの埋め込みコードをCSSだけでレスポンシブ対応させる方法

 
Googleマップのデフォルトの埋め込みコードをCSSだけでレスポンシブ対応させる方法

Webサイトに地図を埋め込む際、よく利用されているのがGoogleマップです。
しかし、デフォルトの埋め込みコードではレスポンシブ対応されておらず、スマートフォンやタブレットなどの画面サイズに合わせた表示が難しいという問題があります。
先日もお客様からこんなご相談をいただきました。

お客様
お客様
Googleマップをレスポンシブ対応させたいのですが、毎回レスポンシブ用のHTMLを追加するのが面倒で・・・。CSSだけで一括でレスポンシブ表示させる方法はありますか？

そこで今回はHTMLやJavaScriptを追加せずに、デフォルトの埋め込みコードとCSSだけでGoogleマップをレスポンシブ対応させる方法をご紹介します。

基本的なGoogleマップ埋め込みコード

まず、2024年11月現在、Google公式から提供されている基本的なGoogleマップ埋め込みコードがこちらです。

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12966.991898658345!2d139.7454329!3d35.6585805!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1732264979384!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">

このコードでは「width=”600″」｢height=”450″」が含まれており、幅が600px、高さは450px固定のサイズで表示されるため、完全なレスポンシブレイアウトではありません。

実際のGoogleマップ埋め込み表示例：

Googleマップの幅が600pxのため、パソコンで閲覧した場合は地図の横に余白ができてしまいます。また、スマートフォンでは逆に、地図が画面からはみ出してしまう状態です。

従来のGoogleマップのレスポンシブ対応方法

はじめに今までよく使われてきた、HTMLとCSSの両方を利用してGoogleマップをレスポンシブ表示させる方法からご紹介します。
CSSのみの方法だけを知りたい方は「GoogleマップをCSSのみでレスポンシブ表示」まで読み飛ばしてください。

従来のGoogleマップのレスポンシブ対応の基本は、CSSを使用して地図のアスペクト比を維持しながら、親要素のHTMLタグに合わせてサイズを調整する形でした。

親要素のHTMLタグ（ここではdivタグ）はGoogleマップの埋め込みコードに含まれていないため、毎回追加する必要があります。

<div class="map-container">
	<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12966.991898658345!2d139.7454329!3d35.6585805!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1732264979384!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</div>
.map-container {
	position: relative;
	padding-top: 75%; /* 4:3 アスペクト比 */
	height: 0;
}

.map-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

このように今まではHTMLとCSSの両方を使い、Googleマップの埋め込みコードを特定のclass名を付与したdivタグで囲う方法が一般的でした。

divタグのコンテナ上部または下部に対して75%（3÷4=0.75）のパディングを設定することで、4:3のアスペクト比を維持しつつ、絶対位置指定したiframeタグを親要素のコンテナいっぱいに広げています。

HTMLとCSSでレスポンシブ対応したGoogleマップ埋め込み表示例：

お客様
お客様
そうですね、自分も今まではこのやり方でレスポンシブ対応してきました。ただ、毎回divタグを追加するのは面倒ですし、システムによってはHTMLを編集できないので、何とかしたいです・・・。

CSSのみでGoogleマップをレスポンシブ対応する方法

次に、CSSのaspect-ratioプロパティを使用したレスポンシブ対応方法をご紹介します。

aspect-ratioプロパティは、2024年11月現在ではほぼ全てのモダンブラウザでサポートされているため、シンプルなCSSの記述だけで全てのGoogleマップをレスポンシブ対応させることができます。

iframe[src*="www.google.com/maps/embed"] {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
}

この方法ではHTML側に追加のコンテナを使用せず、iframeタグにスタイルシートを適用します。

CSSセレクタを利用し、src属性が「www.google.com/maps/embed」、つまりGoogleマップの埋め込みコードのiframeタグに対してのみ、レスポンシブレイアウトを適用させる記述のため、YouTubeなどその他のiframeタグには影響を及ぼしません。

また、アスペクト比を直接指定できるため、たとえば1:1の正方形で表示させたりといった変更も、簡単に行うことができます。

CSSのみでレスポンシブ対応したGoogleマップ埋め込み表示例：

お客様
お客様
なるほど、aspect-ratioとCSSセレクタを利用することで、Googleマップの埋め込みコードは一切編集しなくて良いんですね！これなら一括変更するのも簡単ですし、タグの記述ミスも防げますね。

aspect-ratioプロパティのブラウザ対応状況

2024年11月現在、aspect-ratioプロパティのブラウザ対応状況については、最新のChrome、Firefox、Safari、Edgeでサポートされています。

https://caniuse.com/mdn-css_properties_aspect-ratio

Internet Explorerではサポートされていませんが、IE自体のサポートが終了しているため、多くの環境では問題なく閲覧できます。
もしIEへの対応も行う場合は、従来のコンテナを使う方法が必要となります。

Googleマップのレスポンシブ対応方法まとめ

Googleマップのデフォルトの埋め込みコードをCSSだけでレスポンシブ対応させる方法

今回の記事では、CSSのみでGoogleマップ埋め込み表示をレスポンシブ対応させる方法をご紹介しました。

CSSのみのレスポンシブ対応については、

  • コードが短くシンプルで、追加のHTML要素も不要
  • CSSセレクタを使い、Googleマップにのみスタイルが適用可能
  • aspect-ratioで、アスペクト比をわかりやすく指定できる

といったメリットがあります。
Googleマップのちょっとした小ネタですが、皆様の参考になれば幸いです。

株式会社プレスマンはお客様のプロジェクトの一員となり、Web開発やDX支援などの多岐にわたり現場の課題解決をお手伝いします。｢こんなことまで頼んで大丈夫？」という内容でも、まずはお気軽にご相談ください。

Sketto

Web開発・DX支援のご相談はこちら

AIの導入に躊躇されている企業様は、まずは1つのツールだけでも利用してみてはいかがでしょうか？EC×ChatGPTをはじめとしたAI企画から導入・運用まで、経験豊富な弊社プロ人材が手厚くサポートいたします。

AI企画＆導入事例

AIを活用したい企業様はこちら

CSS Sketto デザイン ローコード
ABOUT ME
日野 夕奈
Webマーケティング部のスタッフです。主にデザインとコーディングを担当しています。見やすさ＆わかりやすさ、それにちょっぴり遊び心を加えたWebデザインを目指しています。
関連記事