【コピペOK】Google MapをWebサイトに埋め込む方法

2025年9月30日

HTML/CSS

目次 [ close ]

はじめに

Webサイトで「アクセス」や「会社概要」のページに地図を載せたいときに便利なのが Google Mapの埋め込み機能 です。
Google Mapからコピーしたコードをそのまま使っても動作しますが、インラインスタイルや固定サイズが含まれているため、レスポンシブ対応やデザイン調整がしにくいというデメリットがあります。

そこで今回は、コピーしたコードを少し整理して CSSでデザインやサイズをコントロールできる書き方 を紹介します。

完成形を確認

以下が今回作成する完成形のサンプルです。

See the Pen google map by yuya o (@yuya-o) on CodePen.

手順

STEP1

Google Mapから埋め込みコードをコピー

Google Mapを開いて、表示したい場所を検索します。（この記事では東京駅を例に紹介します）

赤枠の 「共有」 を選択。

2. 「地図を埋め込む」タブから「HTMLコードをコピー」します。

STEP2

コードを整理してHTMLに貼り付ける

コピーしたコードには幅や高さの指定、インラインスタイルが含まれています。
これらを削除して、自分のHTMLにクラスをつけて書き換えます。

💡 ポイント

<div> で囲む理由
- iframe単体だとサイズ調整やデザインの装飾がやりにくいため、親要素（div）を用意してCSSで管理できるようにしています。
余計なCSSを消す
- Google Mapが自動で付けている width="600" や height="450"やstyle="border:0;" は削除して、CSS側でコントロールします。

STEP3

CSSでデザインを調整

CSSを使えば、サイズやデザインを自由にコントロールできます。
今回の例では、アスペクト比を固定してレスポンシブ対応しつつ、角丸と余白カットを追加しました。

.map-container {
  aspect-ratio: 16 / 9; /* アスペクト比を16:9に固定 */
  width: 80%;           /* ページ幅を指定 */
  overflow: hidden;     /* はみ出しを非表示 */
  border-radius: 8px;   /* 角丸デザイン */
}

.map-container iframe {
  width: 100%;
  height: 100%;
}