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

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

2024-09-05

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

この記事で分かること

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

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

【基本】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マップの「横幅」と「高さ」を設定していただくことで、その縦横比を維持したままレスポンシブ対応させることが可能です。

ケケンタ

縦横比の手計算をする必要が無いので非常に便利です！

calc()関数を使用するときは「演算子の前後に『半角スペース』を入れなければエラーになる」ためご注意ください。
—————————
calc((100%/375)*450)　　→　× NG
calc((100% / 375) * 450)　→　◯ OK