この記事にはプロモーションが含まれています。

【Googleマップ】レスポンシブ対応させる方法｜縦横比の指定も簡単！

2024-09-05

ケケンタ

Googleマップをレスポンシブ対応させる方法が知りたい……

ケケンタ

縦横比も簡単に指定できると良いんだけど……

今回はこのようなお悩みをお持ちの方へ向けて

Googleマップをレスポンシブ対応させる方法
＋
縦横比を簡単に指定する方法

をご紹介します。

この記事で分かること

GoogleマップをWebサイトへ埋め込む基本的な手順
Googleマップに「建物」や「場所」の名称を表示する方法
埋め込んだGoogleマップをレスポンシブ対応＋縦横比を簡単に指定する方法

————

WordPressのスキルを伸ばしたい方におすすめの書籍

脱！WordPress初心者のための一冊

HTMLサイトをWordPressにする本 [ 久保田涼子 ]

created by Rinker

WordPressカスタマイズの基礎

WordPressユーザーのためのPHP入門　はじめから、ていねいに。　第4版 [ 水野史土 ]

created by Rinker

体系的に基本スキルを習得！

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [ 小川欣一 ]

created by Rinker

上級者を目指すための一冊

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル[ 宮内隆行 ]

created by Rinker

Web技術への理解を深め、Webアプリ開発者を目指したい方へ

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか／小森裕介 (著)

by Amazon

プロになるためのWeb技術入門なぜ，あなたはWebシステムを開発できないのか [ 小森裕介 ]

created by Rinker

【基本】GoogleマップをWebサイトへ埋め込む

まずはGoogleマップをWebサイトへ埋め込む基本的な方法から簡単にご説明します。

STEP

Googleマップを開く

Googleで「Googleマップ」と検索してGoogleマップを開きます。

STEP

Googleマップで表示したい場所の「名称」や「住所」を検索する

「名称」で検索すると、埋め込んだGoogleマップ上にもその名称が表示されて分かりやすくなります。

STEP

「共有」をクリックする

STEP

「地図を埋め込む」→「HTMLをコピー」をクリックする

「共有」をクリックするとモーダルウィンドウが表示されます。
その中の「地図を埋め込む」→「HTMLをコピー」をクリックします。

STEP

コピーしたHTMLをサイト上の表示したい箇所に貼りつける

<body>
    <h2>Googleマップ</h2>

    <!-- ↓↓↓ コピーしたHTMLコード ↓↓↓ -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25935.850526651633!2d139.7247671925361!3d35.65283196791798!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbbb41922f3%3A0x33ebfd75f2f06cac!2z5p2x5Lqs6YO95riv5Yy6!5e0!3m2!1sja!2sjp!4v1723511965441!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>

ケケンタ

以上がGoogleマップの基本的な埋め込み方法です！

【結論】Googleマップをレスポンシブ対応させる（縦横比も指定）

Googleマップをレスポンシブ対応させる場合、コピペしたiframeコードを別の要素（divタグがおすすめ）で囲う必要があります。

コピペしたiframeコードをdivタグで囲う

<body>
    <h2>Googleマップ</h2>

    <div class="google-map">
        <!-- ↓↓↓ コピーしたHTMLコード ↓↓↓ -->
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25935.850526651633!2d139.7247671925361!3d35.65283196791798!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbbb41922f3%3A0x33ebfd75f2f06cac!2z5p2x5Lqs6YO95riv5Yy6!5e0!3m2!1sja!2sjp!4v1723511965441!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
</body>

埋め込みコードを取得するときの「サイズ」はどれを選んでもOKです。

Googleマップをレスポンシブ対応させるためのCSS

/* Google Mapをレスポンシブ対応 */
.google-map {
    position: relative;
    width: 100%;
    height: 0;
    /* 比率調整  公式：calc((100% / 横幅) * 高さ) */
    padding-top: calc((100% / 375) * 450);
}

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

上記のCSSの内、編集しなければいけないのはハイライト行（７行目）のみです。

「公式：calc((100% / 横幅) * 高さ)」に、Googleマップの「横幅」と「高さ」を設定していただくことで、その縦横比を維持したままレスポンシブ対応させることが可能です。