Google マップをサイトに埋め込む

WEBサイトにGoogle マップを埋め込む方法を紹介します。方法はとても簡単で、たったの4ステップでできちゃいます。
※レスポンシブに対応するための方法も紹介しております。

ステップ 1

Google マップを開いて埋め込みたい地図の場所や、住所を検索します。

https://www.google.co.jp/maps

map01.jpg

ステップ 2

検索したら共有をクリックします。

map02.jpg

ステップ 3

①地図を埋め込むをクリックして、②HTMLをコピーをクリックします。

map03.jpg

ステップ 4

あとはコピーしたHTMLをHTMLデータの埋め込みたいところにペーストすれば完了です。

レスポンシブ対応するための方法

ここからはレスポンシブ対応するための方法をご紹介します。

HTML

<div class="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3261.3075673127587!2d136.89515371589246!3d35.173885980315774!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600376d6b02a9ebd%3A0xe6fc733dc8c622fc!2z5qCq5byP5Lya56S-6Zu76ISz6IG35Lq65p2RW-WQjeWPpOWxi-ODk-ODrOODg-OCuF0!5e0!3m2!1sja!2sjp!4v1634013074066!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<div>

CSS

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

実装コードはこれで全部です。では、詳しく説明していきます。

HTML

<div class="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3261.3075673127587!2d136.89515371589246!3d35.173885980315774!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600376d6b02a9ebd%3A0xe6fc733dc8c622fc!2z5qCq5byP5Lya56S-6Zu76ISz6IG35Lq65p2RW-WQjeWPpOWxi-ODk-ODrOODg-OCuF0!5e0!3m2!1sja!2sjp!4v1634013074066!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<div>

CSSでスタイルを指定するため、divにはmapとclass名をつけました。iframeには表示したい場所の埋め込み用のHTMLコードを差し込みます。

CSS

.map {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
  • 親要素にposition: relative;、子要素にposition: absolute;を指定します。
  • widthは100%に指定します。100%以外にすると比率がずれます。
  • padding-topは好きな比率の数値を指定します。今回は16:9にしたいので56.25%に指定します。

比率（アスペクト比）について

マップのサイズを指定するときに使う計算式です。

高さの比率÷横幅の比率×100

16:9に合わせてみると、

9÷16×100＝56.25%

つまり100はwidthの100%で56.25%はpadding-topの56.25%にあたります。
他の比率（例：3:4、1:1）でも大丈夫です。これでPC以外でも違和感なく表示されます。
まだWEBサイトにマップを掲載されていなけば、掲載してみると良いでしょう。

関連記事