Googleマップを表示するスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

Googleマップを表示するスライダーを作る方法

Googleマップを1つずつ切り替えて表示できるスライダーを作る方法を紹介します。このサンプルでは、東京駅・大阪駅・名古屋駅のGoogleマップをiframeで表示し、左右のボタンまたは下部のドットをクリックして地図を切り替えます。複数の地図を縦に並べるのではなく、1つの表示エリアを使って順番に確認できるため、複数店舗や施設、営業所などの場所をまとめて案内したいページで利用できます。

ページを開いた時点では最初の東京駅のGoogleマップだけを読み込み、大阪駅と名古屋駅の地図は実際に表示したタイミングで初めてiframeを生成します。一度読み込んだGoogleマップはそのまま保持するため、前の地図へ戻った場合もiframeを作り直しません。また、最初の地図では前ボタン、最後の地図では次ボタンを無効にし、最後から最初へ戻るループ処理を行わない基本的なスライダーとして実装します。

HTMLではGoogleマップから取得した埋め込みURLを設定し、CSSでは地図の表示領域、左右のボタン、ドットなどを整えます。JavaScriptでは現在表示している地図を管理し、必要になったGoogleマップだけを読み込んで表示を切り替えます。店舗一覧、会社案内、支店・営業所の紹介、イベント会場や複数施設へのアクセス案内などに利用でき、表示する場所や地図の高さ、ボタンサイズ、余白なども用途に合わせて変更できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

Googleマップスライダー

左右のボタンまたはドットで表示するGoogleマップを切り替えられます。

東京駅の地図を読み込んでいます

大阪駅の地図は表示したときに読み込みます

名古屋駅の地図は表示したときに読み込みます

左右のボタンまたはドットをクリックして、東京駅・大阪駅・名古屋駅のGoogleマップが1つずつ切り替わることを確認してください。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>Googleマップスライダー</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- Googleマップスライダー本体 -->
  <div class="google-map-slider_area">

    <!-- 前の地図へ移動するボタン -->
    <button
      class="google-map-slider_button google-map-slider_prev"
      type="button"
      aria-label="前の地図">

      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15 18l-6-6 6-6"></path>
      </svg>

    </button>

    <!-- Googleマップ表示エリア -->
    <div class="google-map-slider_view">

      <!--
        【Googleマップの埋め込みURLの設定方法】

        1. Googleマップで表示したい場所を検索します。
        2. 「共有」をクリックします。
        3. 「地図を埋め込む」を選択します。
        4. 「HTMLをコピー」をクリックします。
        5. コピーしたiframeコード内の src="..." のURLを使用します。
        6. YOUR_GOOGLE_MAP_EMBED_URL_1〜3を取得したURLへ置き換えてください。

        このサンプルではGoogle Maps JavaScript APIを使用しません。
        Googleマップから取得した埋め込みURLをiframeへ設定するため、
        APIキーやMap IDは必要ありません。
      -->

      <!-- 1つ目のGoogleマップ -->
      <div
        class="google-map-slider_item is-active"
        data-src="YOUR_GOOGLE_MAP_EMBED_URL_1"
        data-title="1つ目のGoogleマップ">

        <p class="google-map-slider_loading">
          地図を読み込んでいます
        </p>

      </div>

      <!-- 2つ目のGoogleマップ -->
      <div
        class="google-map-slider_item"
        data-src="YOUR_GOOGLE_MAP_EMBED_URL_2"
        data-title="2つ目のGoogleマップ">

        <p class="google-map-slider_loading">
          この地図は表示したときに読み込みます
        </p>

      </div>

      <!-- 3つ目のGoogleマップ -->
      <div
        class="google-map-slider_item"
        data-src="YOUR_GOOGLE_MAP_EMBED_URL_3"
        data-title="3つ目のGoogleマップ">

        <p class="google-map-slider_loading">
          この地図は表示したときに読み込みます
        </p>

      </div>

    </div>

    <!-- 次の地図へ移動するボタン -->
    <button
      class="google-map-slider_button google-map-slider_next"
      type="button"
      aria-label="次の地図">

      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M9 6l6 6-6 6"></path>
      </svg>

    </button>

  </div>

  <!-- 地図選択用ドット -->
  <div class="google-map-slider_dots" aria-label="地図を選択">

    <button
      class="google-map-slider_dot is-active"
      type="button"
      aria-label="1つ目の地図">
    </button>

    <button
      class="google-map-slider_dot"
      type="button"
      aria-label="2つ目の地図">
    </button>

    <button
      class="google-map-slider_dot"
      type="button"
      aria-label="3つ目の地図">
    </button>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
}

/* スライダー本体 */
.google-map-slider_area{
  display:flex; /* 左ボタン・Googleマップ・右ボタンを横方向へ並べる */
  align-items:center; /* 各要素を上下中央へ揃える */
  width:100%; /* 設置した場所の横幅いっぱいに表示 */
  gap:18px; /* ボタンと地図の間隔。値を大きくすると間隔が広がる */
  box-sizing:border-box; /* 横幅の計算を安定させる */
}

/* 前後ボタン */
.google-map-slider_button{
  display:flex; /* SVGを中央へ配置する */
  flex:0 0 48px; /* ボタンの横幅を48pxに固定。値を大きくすると横幅が広がる */
  align-items:center; /* SVGを上下中央へ配置 */
  justify-content:center; /* SVGを左右中央へ配置 */
  width:48px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:48px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ボタン内側の余白を削除 */
  border:0; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* ボタンを円形にする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* SVG矢印の色 */
  cursor:pointer; /* クリックできることを示す */
}

/* 操作できないボタン */
.google-map-slider_button:disabled{
  background:#cbd5e1; /* 操作できないボタンの背景色 */
  cursor:default; /* 通常のカーソルへ戻す */
}

/* ボタン内のSVG */
.google-map-slider_button svg{
  width:24px; /* SVGの横幅。値を大きくすると矢印が大きくなる */
  height:24px; /* SVGの高さ。値を大きくすると矢印が大きくなる */
  fill:none; /* SVG内部を塗りつぶさない */
  stroke:currentColor; /* ボタンのcolorを矢印色として使用 */
  stroke-width:2; /* 矢印線の太さ。値を大きくすると線が太くなる */
  stroke-linecap:round; /* 線の端を丸くする */
  stroke-linejoin:round; /* 線の接続部分を丸くする */
}

/* Googleマップ表示エリア */
.google-map-slider_view{
  position:relative; /* 各地図を同じ場所へ配置する基準 */
  flex:1; /* ボタン以外の残りの横幅を使用 */
  min-width:0; /* 狭い画面でも正しく縮小できるようにする */
  height:420px; /* 地図表示領域の高さ。値を大きくすると表示領域が高くなる */
  overflow:hidden; /* 表示領域からはみ出した部分を隠す */
  border-radius:16px; /* 地図表示領域の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 地図読み込み前の背景色 */
}

/* 各スライド */
.google-map-slider_item{
  position:absolute; /* すべての地図を同じ位置へ配置 */
  inset:0; /* 上下左右0の位置へ配置 */
  display:none; /* 通常は地図を非表示 */
  width:100%; /* 地図表示領域の横幅いっぱいにする */
  height:100%; /* 地図表示領域の高さいっぱいにする */
}

/* 表示中のスライド */
.google-map-slider_item.is-active{
  display:block; /* 選択中の地図だけ表示 */
}

/* Googleマップ */
.google-map-slider_item iframe{
  display:block; /* iframe下にできる余白をなくす */
  width:100%; /* 表示領域の横幅いっぱいに表示 */
  height:100%; /* 表示領域の高さいっぱいに表示 */
  border:0; /* iframeの枠線を削除 */
}

/* 読み込み前の表示 */
.google-map-slider_loading{
  display:flex; /* 文字を中央へ配置 */
  width:100%; /* 表示領域の横幅いっぱいにする */
  height:100%; /* 表示領域の高さいっぱいにする */
  align-items:center; /* 文字を上下中央へ配置 */
  justify-content:center; /* 文字を左右中央へ配置 */
  margin:0; /* p要素の標準余白を削除 */
  padding:20px; /* 文字の周囲の余白。値を大きくすると余白が広がる */
  color:#4b5563; /* 読み込み前の文字色 */
  font-size:16px; /* 読み込み前の文字サイズ。値を大きくすると文字が大きくなる */
  text-align:center; /* 文字を中央揃えにする */
  box-sizing:border-box; /* paddingを横幅と高さに含める */
}

/* ドット全体 */
.google-map-slider_dots{
  display:flex; /* ドットを横方向へ並べる */
  justify-content:center; /* ドットを中央へ配置 */
  gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
  margin-top:24px; /* 地図との間隔。値を大きくすると間隔が広がる */
}

/* 各ドット */
.google-map-slider_dot{
  width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* 内側余白を削除 */
  border:0; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* ドットを円形にする */
  background:#cbd5e1; /* 通常時のドット色 */
  cursor:pointer; /* クリックできることを示す */
}

/* 選択中のドット */
.google-map-slider_dot.is-active{
  background:#2563eb; /* 選択中のドット色 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12px。スマートフォンでは画面端の余白を小さくする */
  }

  /* スライダー本体 */
  .google-map-slider_area{
    gap:8px; /* ボタンと地図の間隔。PCより狭くして地図の横幅を確保する */
  }

  /* 前後ボタン */
  .google-map-slider_button{
    flex-basis:42px; /* ボタンの固定横幅。PCの48pxより小さくする */
    width:42px; /* ボタンの横幅。PCより小さくする */
    height:42px; /* ボタンの高さ。PCより小さくする */
  }

  /* ボタン内のSVG */
  .google-map-slider_button svg{
    width:22px; /* SVGの横幅。PCより小さくする */
    height:22px; /* SVGの高さ。PCより小さくする */
  }

  /* Googleマップ表示エリア */
  .google-map-slider_view{
    height:320px; /* 地図表示領域の高さ。PCの420pxより低くする */
  }

}

/* スライダーで使用する要素を取得 */
const sliderArea = document.querySelector('.google-map-slider_area');
const items = sliderArea.querySelectorAll('.google-map-slider_item');
const dots = document.querySelectorAll('.google-map-slider_dot');
const prevButton = sliderArea.querySelector('.google-map-slider_prev');
const nextButton = sliderArea.querySelector('.google-map-slider_next');

/* 最初に表示する地図番号 */
let currentIndex = 0;

/* 初めて表示した地図だけiframeを生成 */
function loadMap(index){

  /* 読み込む地図を取得 */
  const item = items[index];

  /* すでに読み込み済みの場合は処理しない */
  if(item.dataset.loaded === 'true'){
    return;
  }

  /* HTMLのdata-srcからGoogleマップの埋め込みURLを取得 */
  const src = item.dataset.src;

  /* HTMLのdata-titleからiframeタイトルを取得 */
  const title = item.dataset.title;

  /* iframeを作成 */
  const iframe = document.createElement('iframe');

  /* Googleマップの埋め込みURLを設定 */
  iframe.src = src;

  /* iframeの内容を表すタイトルを設定 */
  iframe.title = title;

  /* ブラウザの遅延読み込みを設定 */
  iframe.loading = 'lazy';

  /* Googleマップ表示時のリファラーポリシーを設定 */
  iframe.referrerPolicy = 'no-referrer-when-downgrade';

  /* 読み込み前の表示をGoogleマップへ置き換える */
  item.replaceChildren(iframe);

  /* 読み込み済みとして記録 */
  item.dataset.loaded = 'true';

}

/* 現在の表示状態を更新 */
function updateSlider(){

  /* 現在表示するGoogleマップだけ必要に応じて読み込む */
  loadMap(currentIndex);

  /* 現在選択している地図だけ表示 */
  items.forEach((item, index) => {
    item.classList.toggle('is-active', index === currentIndex);
  });

  /* 現在の地図に対応するドットを選択状態にする */
  dots.forEach((dot, index) => {
    dot.classList.toggle('is-active', index === currentIndex);
  });

  /* 最初の地図では前ボタンを無効にする */
  prevButton.disabled = currentIndex === 0;

  /* 最後の地図では次ボタンを無効にする */
  nextButton.disabled = currentIndex === items.length - 1;

}

/* 前ボタンをクリック */
prevButton.addEventListener('click', () => {

  /* 最初の地図より前へ移動しない */
  if(currentIndex > 0){
    currentIndex--;
    updateSlider();
  }

});

/* 次ボタンをクリック */
nextButton.addEventListener('click', () => {

  /* 最後の地図より後ろへ移動しない */
  if(currentIndex < items.length - 1){
    currentIndex++;
    updateSlider();
  }

});

/* 各ドットをクリック */
dots.forEach((dot, index) => {

  dot.addEventListener('click', () => {

    /* クリックしたドットに対応する地図へ移動 */
    currentIndex = index;

    /* 表示を更新 */
    updateSlider();

  });

});

/* 最初は1つ目のGoogleマップだけ読み込んで表示 */
updateSlider();

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではGoogleマップの埋め込みURL、左右の切り替えボタン、地図を直接選択するドットを設定します。CSSではGoogleマップの表示領域やボタン、ドットを整え、JavaScriptでは表示する地図の切り替えとiframeの生成を行います。Google Maps JavaScript APIは使用せず、Googleマップから取得した埋め込みURLをiframeへ設定するため、APIキーやMap IDは必要ありません。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはGoogleマップスライダーの構造を作るファイルです。左右の切り替えボタン、3つの地図表示用スライド、3つのドットを配置しています。Googleマップのiframeを最初から直接記述するのではなく、各.google-map-slider_itemのdata-srcへ埋め込みURLを設定します。配布コードではYOUR_GOOGLE_MAP_EMBED_URL_1、YOUR_GOOGLE_MAP_EMBED_URL_2、YOUR_GOOGLE_MAP_EMBED_URL_3を使用しているため、それぞれ表示したい場所の埋め込みURLへ変更します。

style.cssはスライダーとGoogleマップの表示を整えるファイルです。左右のボタンと地図を横方向へ並べ、PCでは地図表示領域の高さを420pxにしています。ボタンサイズ、SVG矢印、地図表示領域の高さと角丸、ドットのサイズ・間隔・色、640px以下のレスポンシブ表示もこのファイルで設定します。

script.jsはGoogleマップの読み込みと表示切り替えを行うファイルです。ページを開いた時点では1つ目の地図だけをiframeとして生成し、2つ目以降は実際に表示したタイミングで初めて読み込みます。一度生成したiframeには読み込み済みの状態を記録し、前の地図へ戻った場合もiframeを作り直さず、そのまま再表示します。

設置方法・使い方
最初にGoogleマップでスライダーへ表示したい場所を検索します。東京駅を表示する場合はGoogleマップで「東京駅」を検索し、目的の場所が表示された状態で「共有」を選択します。共有画面から「地図を埋め込む」を選び、「HTMLをコピー」でiframeの埋め込みコードを取得します。コピーしたコードのsrc="..."に入っているURLが、このサンプルで使用するGoogleマップの埋め込みURLです。

1つ目の場所から取得した埋め込みURLを、index.htmlのYOUR_GOOGLE_MAP_EMBED_URL_1へ設定します。同じ手順で2つ目の場所をYOUR_GOOGLE_MAP_EMBED_URL_2、3つ目の場所をYOUR_GOOGLE_MAP_EMBED_URL_3へ設定してください。デモでは東京駅・大阪駅・名古屋駅を表示していますが、配布コードでは利用者自身が表示したい場所の埋め込みURLへ変更して使用します。

Googleマップで表示位置を変更したい場合は、緯度・経度をJavaScriptへ直接記述するのではなく、Googleマップ側で表示したい場所や地図の状態を指定してから埋め込みコードを取得し、そのsrcのURLを使用します。この実装はGoogleマップの埋め込みURLをiframeで表示する方式のため、Google Maps JavaScript APIのAPIキーやMap IDを取得する必要はありません。

埋め込みURLを設定したら、sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置し、sample/index.htmlをブラウザで開きます。ページを開いた時点では1つ目のGoogleマップだけが生成されます。次ボタンまたは2つ目のドットをクリックすると2つ目の地図が初めて読み込まれ、3つ目も同じ仕組みで読み込まれます。最初の地図では前ボタン、最後の地図では次ボタンが無効になり、最後から最初へ戻るループ処理は行いません。

カスタマイズできる内容
index.htmlでは、Googleマップの埋め込みURLとiframeのタイトルを変更できます。data-srcへ別の場所から取得した埋め込みURLを設定すると、スライダーで表示する地図を変更できます。data-titleには「東京駅のGoogleマップ」「大阪店のGoogleマップ」のように、iframeで表示する内容が分かるタイトルを設定できます。地図を増減する場合は.google-map-slider_itemと、それに対応する.google-map-slider_dotを同じ数になるように追加または削除します。

style.cssでは、地図表示領域の高さ、左右ボタンのサイズと色、SVG矢印のサイズと太さ、地図表示領域の角丸、ドットのサイズ・間隔・色などを変更できます。script.jsでは、初めて表示したGoogleマップだけiframeを生成し、一度読み込んだiframeを保持する処理を行っています。

数値調整
style.css

padding:40px 20px;
ページ全体の余白です。上下40px・左右20pxを指定しています。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。

gap:18px;
左ボタン・Googleマップ・右ボタンの間隔です。値を大きくするとボタンと地図が離れ、小さくすると近くなります。

48px
PC表示で使用する左右ボタンのサイズです。flex:0 0 48px;、width:48px;、height:48px;で指定しています。値を大きくするとボタンが大きくなり、小さくすると小さくなります。

border-radius:50%;
左右ボタンを円形にする指定です。50%で円形になり、値を小さくすると角丸の形状が変わります。

24px
PC表示で使用するSVG矢印の横幅と高さです。値を大きくすると矢印が大きくなり、小さくすると小さくなります。

stroke-width:2;
SVG矢印の線の太さです。値を大きくすると線が太くなり、小さくすると細くなります。

height:420px;
PC表示で使用するGoogleマップ表示領域の高さです。値を大きくすると地図が縦に高くなり、小さくすると低くなります。

border-radius:16px;
Googleマップ表示領域の角丸です。値を大きくすると丸みが強くなり、0にすると角丸がなくなります。

padding:20px;
Googleマップを生成する前に表示する案内文の内側余白です。値を大きくすると文字と表示領域の端との間隔が広がります。

font-size:16px;
Googleマップを生成する前に表示する案内文の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

gap:10px;
ドット同士の間隔です。値を大きくするとドット同士が離れ、小さくすると近くなります。

margin-top:24px;
Googleマップとドットの間隔です。値を大きくするとドットが地図から離れ、小さくすると近くなります。

width:12px;・height:12px;
各ドットのサイズです。値を大きくするとドットが大きくなり、小さくすると小さくなります。

@media (max-width:640px)
スマートフォン向け表示へ切り替える基準となる画面幅です。640px以下になると、ページ余白、ボタンと地図の間隔、ボタンサイズ、SVG矢印サイズ、Googleマップ表示領域の高さを変更します。

padding:24px 12px;
640px以下で使用するページ全体の余白です。上下24px・左右12pxにして、PC表示より画面端の余白を小さくします。

gap:8px;
640px以下で使用するボタンとGoogleマップの間隔です。PC表示の18pxから8pxへ小さくし、地図を表示する横幅を確保します。

42px
640px以下で使用する左右ボタンのサイズです。PC表示の48pxより小さくしています。

22px
640px以下で使用するSVG矢印のサイズです。PC表示の24pxより小さくしています。

height:320px;
640px以下で使用するGoogleマップ表示領域の高さです。PC表示の420pxから320pxへ小さくしています。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの.google-map-slider_areaへwidth:100%;を設定し、.google-map-slider_viewにはflex:1;とmin-width:0;を指定しています。左右のボタンを除いた利用可能な横幅に合わせてGoogleマップの表示領域が伸縮します。iframeにはwidth:100%;とheight:100%;を設定しているため、地図も表示領域に合わせて表示されます。

画面幅640px以下では、ページ余白を24px 12px、ボタンと地図の間隔を8px、左右ボタンを42px、SVG矢印を22px、Googleマップ表示領域の高さを320pxへ変更します。PCより操作部分と表示領域をコンパクトにすることで、スマートフォン・タブレット・PCで利用できる構成にしています。