今回は、サイトにGoogleマップを埋め込む方法を、画像を使いながらわかりやすく解説します。
目次
Googleマップをレスポンシブでサイトに埋め込む方法
1.Googleマップで、埋め込みたい場所を選択し、共有をクリック
まずは、こちらの公式のgoogleマップに飛んでください。
その後、サイトに埋め込みたい場所を、
選択しましょう！
今回は、東京タワーにピンをさしています。
2.『地図を埋め込む』を選択後、地図サイズを調整する
共有をクリック後、以下の画像の赤線で囲んだ『地図を埋め込む』をクリック
その後、以下の画像の赤線で囲んだところをクリック
すると、以下の画像のように、サイズを選択することができます。
また、『カスタムサイズ』を選択すると、
以下の画像のように、自由にサイズを変更することができます。
左の赤線が『横幅』、右の赤線が『高さ』を調整する数字です。
3.HTMLをコピーして、コードを貼る
以下の画像の赤線で囲んだ『HTMLをコピー』をクリックして、
コードをコピーしましょう！
コピーをしたら、Googleマップを貼りたい作業ファイルを開き、
コードを貼り付けます。
すると、以下の画像のように、サイトにgoogleマップを埋め込むことができます。
しかし、今のままでは、レスポンシブに対応したマップではないので、
調整をしたいと思います。
4.レスポンシブに対応した、googleマップ作成方法
まずは、以下のようにiframeを、『width=”100%”』『height=”auto”』に変更してください。
<div class="map1">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3241.747800109201!2d139.7432442!3d35.6585848!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1600327860639!5m2!1sja!2sjp" width="100%" height="auto" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
その後、CSSを以下のように変更します。
.map1 {
padding-top: 56.25%;
position: relative;
}
.map1 > iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
このように、設定することで、画面幅が変更しても、
縦横比を保ったまま変更されます。
以下の画像をご覧ください。
①は、レスポンシブに対応したマップ
②は、レスポンシブに対応していないマップです。
pcサイズでは、①②の差はあまり感じられませんが、
スマホサイズで、確認してみると、
②は、あきらかに地図の縦横比がおかしいですね。
このように、レスポンシブ対応をさせておかないと、
googleマップの視認性が悪くなってしまいます。
ですので、HTMLコードを貼る際には、
一緒にレスポンシブ対応をさせておきましょう！
