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

ケケンタ — Thu, 05 Sep 2024 02:35:35 +0000

ケケンタ

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

ケケンタ

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

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

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

をご紹介します。

この記事で分かること

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

Web制作で副業するなら絶対使いこなしたいJavaScriptアニメーション

【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】

【PHP超入門】PHPの基本構文をまるっと解説！【サンプルコードあり】

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

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

STEP

Googleマップを開く

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

STEP

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

Googleマップで場所の「名称」や「住所」を検索する

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

STEP

「共有」をクリックする

STEP

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

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

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

STEP

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


    Googleマップ

Googleマップ（日本語表記）

ケケンタ

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

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

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

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


    Googleマップ

埋め込みコードを取得するときの「サイズ」はどれを選んでも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

【補足】Googleマップ上に建物や場所の名称を表示する方法

埋め込んだGoogleマップ上に、建物や場所の名称を表示することが可能です。

やり方はいたって簡単で、Googleマップで地図検索するときに、住所ではなく建物や場所の名称で検索をするだけです。

「住所」ではなく「名称」で検索する

「住所」ではなく「名称」で検索する

たったこれだけで埋め込んだGoogleマップ上にも「建物」や「場所」の名称が表示されて分かりやすくなります。

まとめ

以上が

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

でした。

Googleマップを埋め込むときは、ほとんどの場合レスポンシブ対応が必須かと思います。

ケケンタ

書き方さえ分かってしまえばコピペで簡単に実装できます！

この記事がお役に立ったなら何よりです。

当ブログではWeb制作やWordPress、PHPに関する情報を発信しています。

ご興味のある方はほかの記事もご覧いただけるとうれしいです！

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

レスポンシブ – ケケンタの独学ITブログ

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

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