Googleマップを軽量化したい（遅延読み込み）

このページでは、ページの読み込み速度を落としがちな Googleマップの埋め込み地図 を、できるだけ軽く表示するための 遅延読み込み（Lazy Load） の考え方と実装パターンをまとめています。

難しいライブラリは使わず、静的HTML＋少しのJavaScript でできる範囲にしぼって解説します。

このページの対象とゴール
なぜGoogleマップは重くなりがち？
レベル1：loading=”lazy” と配置の見直しで軽くする
1. 1-1. iframe に loading=”lazy” を付ける
2. 1-2. アクセスページにまとめる（トップに置かない）
レベル2：「クリックしたときだけ」地図を読み込む
1. 2-1. 最初は「地図を表示」ボタンだけ出すHTML
2. 2-2. ボタンが押されたら iframe を差し込むJavaScript
レベル3：スクロール位置で自動読み込みする（発展）
よくあるつまづきとチェックポイント
次のステップ：Googleマップ周りをさらに整える

このページの対象とゴール

このページは、次のような方を想定しています。

アクセスページなどに Googleマップを埋め込んでいて、ページの読み込みが重い と感じている
トップページなど、ファーストビューにマップを置きたくない／置けない と考えている
なるべくシンプルな仕組みで、「見たい人だけマップを読み込む」 形にしたい

読み終わるころには、次の3つのレベルの違いと、どこまで対応するかの判断ができるようになります。

レベル1：loading="lazy" と配置の見直しで、最低限の軽量化をする
レベル2：「ボタンを押したら地図を読み込む」方式にして、初回ロードをもっと軽くする
レベル3：スクロール位置で自動読み込みする（おまけ・発展）

ポイント：最初はレベル1だけでも十分

いきなり複雑な仕組みにしなくても、loading=”lazy” とマップの配置を見直すだけでも体感速度はかなり改善します。まずはレベル1から試して、必要に応じてレベル2以降を検討するイメージでOKです。

なぜGoogleマップは重くなりがち？

Googleマップの埋め込みは、見た目はシンプルでも裏側では次のような処理が走っています。

地図本体のデータ（タイル画像・ベクターデータなど）を読み込む
マーカーやUI（拡大ボタン・ルート検索など）用のJavaScriptを読み込む
ページ内に複数マップがあると、その分だけ処理が増える

そのため、次のような状況で特に重く感じやすくなります。

トップページの上部にマップを埋め込んでいる
1ページの中に複数のマップを置いている（店舗一覧など）
画像や動画など、他の重い要素も同じページに詰め込んでいる

ポイント：マップは「必要なページだけ」に絞る

まずは アクセスページ専用 にして、トップページには地図画像＋「地図を開く」ボタンだけにするなど、マップを表示するページ・位置を見直すだけでも十分な軽量化になります。

レベル1：loading=”lazy” と配置の見直しで軽くする

もっとも簡単にできる軽量化は、遅延読み込みの属性を活用しつつ、マップの配置を工夫することです。

1-1. iframe に loading=”lazy” を付ける

最近の埋め込みコードには、すでに loading="lazy" が付いていることが多いです。例：

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

loading="lazy" が付いていると、画面に近づいたタイミングで読み込みが始まるため、ファーストビューの表示が少し軽くなります。

ポイント：まずは loading=”lazy” が付いているか確認

古い埋め込みコードを使っている場合は、手動で loading="lazy" を追加してもOKです。ただし、極端に古いブラウザでは無視されるだけなので、表示が壊れる心配はありません。

1-2. アクセスページにまとめる（トップに置かない）

次のような方針にするだけでも、全体の体感速度は変わってきます。

トップページには「写真＋簡単な住所＋『地図を見る』ボタン」のみ
詳細な地図は アクセス専用ページ（/accessなど） にまとめる
他のページには、Googleマップではなく住所テキストだけを載せる

Temply Restaurant のようなテンプレートでも、アクセス用のセクションを1つにまとめる構成がおすすめです。

レベル2：「クリックしたときだけ」地図を読み込む

さらにページを軽くしたい場合は、最初は地図を読み込まず、ボタンを押したときだけ読み込む方式が便利です。

2-1. 最初は「地図を表示」ボタンだけ出すHTML

アクセスセクションを、次のように書き換えます。

<section class="access">
  <h2 class="section-title">アクセス</h2>
  <p>○○駅から徒歩3分、△△通り沿いです。</p>

  <div class="access-map js-map-wrapper" data-map-src="https://www.google.com/maps/embed?pb=...">
    <p>地図はボタンを押すと読み込まれます。</p>
    <button type="button" class="map-load-btn">地図を表示する</button>
    <p class="map-note">※タップするとGoogleマップの地図が読み込まれます。</p>
  </div>
</section>

data-map-src 属性に、元の iframe の src のURL を入れておきます。
ボタンが押されるまで、iframe 自体は存在しないため、読み込みも発生しません。

2-2. ボタンが押されたら iframe を差し込むJavaScript

ページの最後（</body> の直前など）に、次のスクリプトを追加します。

<script>
document.addEventListener('DOMContentLoaded', function () {
  var wrapper = document.querySelector('.js-map-wrapper');
  if (!wrapper) return;

  var button = wrapper.querySelector('.map-load-btn');
  if (!button) return;

  button.addEventListener('click', function () {
    var src = wrapper.getAttribute('data-map-src');
    if (!src) return;

    // すでに読み込み済みなら何もしない
    if (wrapper.querySelector('iframe')) return;

    var iframe = document.createElement('iframe');
    iframe.src = src;
    iframe.loading = 'lazy';
    iframe.allowFullscreen = true;
    iframe.referrerPolicy = 'no-referrer-when-downgrade';
    iframe.style.border = '0';
    iframe.width = '600';
    iframe.height = '450';

    wrapper.innerHTML = '';
    wrapper.appendChild(iframe);
  });
});
</script>

これで、ユーザーが「地図を表示する」ボタンを押したタイミングでのみ、Googleマップのiframeが読み込まれるようになります。

ポイント：「見たい人だけ読み込む」だけでもだいぶ軽い

すべての訪問者が地図を見るとは限りません。ボタン式にするだけで、「見ない人」には一切マップの読み込みが発生しないため、特にスマホでの体感速度が変わってきます。

レベル3：スクロール位置で自動読み込みする（発展）

「クリックは不要だけど、画面に近づいたら自動で読み込みたい」という場合は、Intersection Observer を使う方法もあります。

仕組みはレベル2とほぼ同じで、button を使わず、マップが画面内に入ってきたタイミングで iframe を生成するだけです。

<div class="access-map js-map-observer" data-map-src="https://www.google.com/maps/embed?pb=...">
  <p>この下にGoogleマップが表示されます。</p>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var target = document.querySelector('.js-map-observer');
  if (!target || !('IntersectionObserver' in window)) return;

  var loaded = false;
  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting && !loaded) {
        loaded = true;
        var src = target.getAttribute('data-map-src');
        if (!src) return;

        var iframe = document.createElement('iframe');
        iframe.src = src;
        iframe.loading = 'lazy';
        iframe.allowFullscreen = true;
        iframe.referrerPolicy = 'no-referrer-when-downgrade';
        iframe.style.border = '0';
        iframe.width = '600';
        iframe.height = '450';

        target.innerHTML = '';
        target.appendChild(iframe);
        observer.unobserve(target);
      }
    });
  });

  observer.observe(target);
});
</script>

ポイント：まずはレベル2までで十分

Intersection Observer は便利ですが、対応していない古いブラウザも一部存在します。まずはレベル1〜2までを実装し、必要に応じてレベル3を検討するくらいで十分です。