Home
CSS
【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

公開日
2021.07.23
更新日
2022.04.02
【簡単】WebサイトにGoogleマップを埋め込む一番簡単な方法

どうも!かけちまるです!

企業のコーポレートサイトでは、ほぼ必須でGoogleマップが埋め込まれています。
WebサイトにGoogleマップを埋め込む方法は色々ありますが、やっぱり一番簡単なのはiframeを使った埋め込みだと思います。

APIを使った埋め込みは、カスタマイズ性は高いけど料金がかかる可能性があるし、Googleの仕様変更で突然表示できなくなる可能性もあるので心配事が多めです。

iframeで埋め込めばそんな心配もなく簡単・安心・安全なやり方ではないでしょうか。

この記事では、

  • ・iframeを使用したGoogleマップの埋め込み
  • ・よくあるGoogleマップのカスタマイズ方法

を解説していきます。

Googleマップの埋め込み

大まかな手順はこんな感じです。

  • Googleマップにアクセス
  • ②共有 > 地図を埋め込むからHTMLをコピー
  • ③埋め込みタグをGoogleマップを表示させたい場所にペーストする。
1

Googleマップにアクセス

Googleマップにアクセスし、埋め込みたい建物名や住所を検索します。

2

共有 > 地図を埋め込むからHTMLをコピー

埋め込みたい場所を検索したら、共有をクリック。
地図を埋め込むタブに移動し、HTMLをコピーから埋め込みタグをコピーします。

※埋め込みタグの横に地図サイズを選択する項目がありますが、サイズはCSSで調整すればいいので気にする必要はないと思われます。

埋め込みタグをコピー
3

埋め込みタグをGoogleマップを表示させたい場所にペーストする。

GoogleマップのサイズはCSSでお好みで調整してください。

Googleマップのよくあるカスタマイズ

この記事の埋め込み方法だとカスタマイズ性が少し劣りますが、CSSで見た目の調整はできるのでよくあるカスタマイズを3つ紹介します。

Googleマップの縦横比を保つ

通常だとウィンドウ幅を変えるとGoogleマップの縦横比が変わってしまいます。
それが気に入らない人は以下のコードを試してみてください。

やっていることは、

  • ・埋め込みタグをdivタグで囲む
  • ・divタグはpadding-topを%指定をして高さを調節する
  • ・埋め込みタグはpositionで位置を調節する

です。

これはpaddingの特性を利用しています。
paddingの特性として%指定をすると親要素の幅に対する割合で値が決まります。

HTML
コピー
<div class="google_map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.74779853328!2d139.74324421519992!3d35.65858483882126!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1626913978443!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div>
CSS
コピー
.google_map{ padding-top: 40%; width: 100%; position: relative; } .google_map iframe{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

表示サンプル

Googleマップの縮尺を変える

もっと周辺情報かわかるようにしたかったり、もっと街全体の様子がわかるようにしたいなどGoogleマップの縮尺を変える方法を解説します。

iframeのsrcの一部を変えるだけで縮尺を変えることができます。
srcの中の!4f13.1という部分を見つけてください。
!4f13.1の中の13.1の部分の数字を変更すると縮尺を変えることができます。

数字を小さくすると近づき、大きくすると遠ざかります。

Googleマップの縮尺を変える

表示サンプル
値を1.0に設定した場合

Googleマップにフィルターをかける

GoogleマップのグレーにしたいなどのカスタマイズはCSSのfilterを指定することで簡単にGoogleマップの雰囲気を変えることができます。

※CSSのfilterはIEでは動作しません。

CSS
コピー
iframe{ filter: grayscale(100%); }

表示サンプル

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

WP REST APIを使用してWordPress記事を外部サイトで表示する方法

WP REST APIを使用してWordPress記事を外部サイトで表示する方法

【PHP】配列の要素の数を取得する

【PHP】配列の要素の数を取得する

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

Three.jsテクスチャをGLSLでbacground-size: cover;のようにする

【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション

react-scrollでページ内スクロールが効かない時と複数ページの対応

react-scrollでページ内スクロールが効かない時と複数ページの対応

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!