目次 [ close ]
  1. はじめに
  2. 完成形を確認
  3. 手順
  4. APIキーは必要？無料で使える？
  5. 表示を軽くする：遅延読み込み
  6. さいごに

はじめに

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

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

完成形を確認

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

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

手順

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

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

  1. 赤枠の 「共有」 を選択。

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%;
}

APIキーは必要？無料で使える？

「Google Mapって有料なんじゃ…？」と不安になりますよね。今回のようにGoogleマップの「共有」から取得するiframe埋め込みは、APIキー不要・無料で使えます。安心してコピペしてください。

一方で、地図上に自前のマーカーを立てたり、JavaScriptで操作したりする「Maps JavaScript API」を使う場合はAPIキーの発行と課金設定が必要です。お店の場所を見せたいだけなら、無料のiframe埋め込みで十分ですよ。

表示を軽くする：遅延読み込み

地図の埋め込みはページが少し重くなりがちです。ページ表示を速く保ちたいときは、iframeに loading="lazy" を足しておきましょう。画面に地図が近づいたときに初めて読み込まれ、初期表示が軽くなります。

<iframe src="..." loading="lazy" ...></iframe>

さいごに

Google Mapの埋め込みは、コピーして貼り付けるだけでも使えますが、インラインスタイルを整理してCSSで管理する方が断然おすすめ です。
これならレスポンシブにも対応しやすく、デザインの自由度も高まります。

まずは今回のコードをコピペして、自分のサイトに合わせて幅や角丸のデザインを調整してみましょう！