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

Googleマップを表示するカルーセルを作る方法

Googleマップを表示するカルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。カルーセルを切り替えるたびに表示されるGoogleマップも切り替わるため、複数店舗の所在地や営業所、観光スポットなどを1つの画面で分かりやすく紹介できます。

このサンプルでは、前へ・次へボタンやドットナビをクリックすると、Googleマップとタイトル、説明文をまとめて切り替えられます。複数の埋め込み地図を見やすく整理できるため、店舗案内ページや会社案内、観光案内など、場所を紹介するWebサイトにも導入しやすい構成です。

地図の表示場所はGoogleマップの埋め込みURLを書き換えるだけで変更できます。また、タイトルや説明文もHTMLから自由に編集できるため、自社サイトや店舗紹介ページなど用途に合わせてカスタマイズしやすい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-carousel_demo">

    <!-- カルーセル本体 -->
    <div class="google-map-carousel_box">

      <!-- スライド一覧 -->
      <div class="google-map-carousel_track" id="google-map-carousel-track">

        <!-- スライド1 -->
        <div class="google-map-carousel_slide">

          <!-- 場所名 -->
          <div class="google-map-carousel_title">
            東京駅
          </div>

          <!--
            Googleマップ

            表示場所は src の q= を変更します。

            例）
            q=東京駅
            q=大阪駅
            q=名古屋駅

            緯度・経度で指定する場合

            q=35.681236,139.767125

            のように指定できます。
          -->
          <iframe
            class="google-map-carousel_map"
            src="https://www.google.com/maps?q=東京駅&output=embed"
            loading="lazy">
          </iframe>

        </div>

        <!-- スライド2 -->
        <div class="google-map-carousel_slide">

          <div class="google-map-carousel_title">
            大阪駅
          </div>

          <iframe
            class="google-map-carousel_map"
            src="https://www.google.com/maps?q=大阪駅&output=embed"
            loading="lazy">
          </iframe>

        </div>

        <!-- スライド3 -->
        <div class="google-map-carousel_slide">

          <div class="google-map-carousel_title">
            名古屋駅
          </div>

          <iframe
            class="google-map-carousel_map"
            src="https://www.google.com/maps?q=名古屋駅&output=embed"
            loading="lazy">
          </iframe>

        </div>

      </div>

    </div>

    <!-- 操作ボタン -->
    <div class="google-map-carousel_controls">

      <!-- 前へ -->
      <button
        class="google-map-carousel_arrow google-map-carousel_prev"
        id="google-map-carousel-prev"
        type="button"
        aria-label="前へ">
        前へ
      </button>

      <!-- ドットナビ -->
      <div class="google-map-carousel_dots">

        <button
          class="google-map-carousel_dot is-active"
          type="button"
          data-index="0"
          aria-label="東京駅">
        </button>

        <button
          class="google-map-carousel_dot"
          type="button"
          data-index="1"
          aria-label="大阪駅">
        </button>

        <button
          class="google-map-carousel_dot"
          type="button"
          data-index="2"
          aria-label="名古屋駅">
        </button>

      </div>

      <!-- 次へ -->
      <button
        class="google-map-carousel_arrow google-map-carousel_next"
        id="google-map-carousel-next"
        type="button"
        aria-label="次へ">
        次へ
      </button>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* 外側余白 */
  padding:40px 20px; /* ページ余白 */
  background:#f8fafc; /* 背景色 */
  font-family:sans-serif; /* フォント */
}

/* カルーセル全体 */
.google-map-carousel_demo{
  max-width:900px; /* 最大横幅 */
  margin:0 auto; /* 中央配置 */
}

/* カルーセル本体 */
.google-map-carousel_box{
  overflow:hidden; /* はみ出し非表示 */
  border:1px solid #dbeafe; /* 枠線 */
  border-radius:20px; /* 角丸 */
  background:#ffffff; /* 背景色 */
  box-shadow:0 12px 30px rgba(15,23,42,.08); /* 影 */
}

/* スライド一覧 */
.google-map-carousel_track{
  display:flex; /* 横並び */
  transition:transform .45s ease; /* 切り替え速度：大きくすると遅く、小さくすると速くなる */
}

/* スライド */
.google-map-carousel_slide{
  flex:0 0 100%; /* 1画面に1枚表示 */
  padding:28px; /* 内側余白 */
  box-sizing:border-box;
}

/* 場所名 */
.google-map-carousel_title{
  margin:0 0 18px; /* 下余白 */
  text-align:center; /* 中央揃え */
  font-size:28px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  color:#0f172a; /* 文字色 */
}

/* Googleマップ */
.google-map-carousel_map{
  display:block;
  width:100%; /* 横幅 */
  height:420px; /* 高さ：変更すると地図の高さが変わる */
  border:0; /* 枠線なし */
  border-radius:14px; /* 角丸 */
}

/* 操作エリア */
.google-map-carousel_controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px; /* ボタン間隔 */
  margin-top:24px; /* 上余白 */
}

/* 前へ・次へボタン */
.google-map-carousel_arrow{
  position:relative;
  width:48px; /* ボタンサイズ */
  height:48px; /* ボタンサイズ */
  padding:0;
  border:none;
  border-radius:50%; /* 円形 */
  background:#2563eb; /* 背景色 */
  cursor:pointer;
  font-size:0; /* テキスト非表示 */
}

/* 矢印 */
.google-map-carousel_arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:11px; /* 矢印サイズ */
  height:11px; /* 矢印サイズ */
  border-top:3px solid #ffffff;
  border-right:3px solid #ffffff;
}

/* 前へ */
.google-map-carousel_prev::before{
  transform:translate(-40%,-50%) rotate(-135deg);
}

/* 次へ */
.google-map-carousel_next::before{
  transform:translate(-60%,-50%) rotate(45deg);
}

/* ドットナビ */
.google-map-carousel_dots{
  display:flex;
  gap:10px; /* ドット間隔 */
}

/* ドット */
.google-map-carousel_dot{
  width:12px; /* サイズ */
  height:12px; /* サイズ */
  padding:0;
  border:none;
  border-radius:50%;
  background:#cbd5e1; /* 通常色 */
  cursor:pointer;
}

/* 選択中 */
.google-map-carousel_dot.is-active{
  background:#2563eb;
}

/* スマホ表示 */
@media(max-width:600px){

  /* スライド */
  .google-map-carousel_slide{
    padding:20px; /* 余白 */
  }

  /* タイトル */
  .google-map-carousel_title{
    font-size:22px; /* 文字サイズ */
  }

  /* 地図 */
  .google-map-carousel_map{
    height:320px; /* 高さ */
  }

}

// スライド一覧を取得
const googleMapCarouselTrack = document.getElementById("google-map-carousel-track");

// スライドを取得
const googleMapCarouselSlides = document.querySelectorAll(".google-map-carousel_slide");

// ドットナビを取得
const googleMapCarouselDots = document.querySelectorAll(".google-map-carousel_dot");

// 前へボタンを取得
const googleMapCarouselPrev = document.getElementById("google-map-carousel-prev");

// 次へボタンを取得
const googleMapCarouselNext = document.getElementById("google-map-carousel-next");

// 現在表示中のスライド番号
let googleMapCarouselCurrent = 0;

// スライドを表示
function googleMapCarouselShow(index){

  // 最初より前なら最後へ移動
  if(index < 0){

    googleMapCarouselCurrent = googleMapCarouselSlides.length - 1;

  // 最後より次なら最初へ戻る
  }else if(index >= googleMapCarouselSlides.length){

    googleMapCarouselCurrent = 0;

  // 通常の移動
  }else{

    googleMapCarouselCurrent = index;

  }

  // スライドを横移動
  googleMapCarouselTrack.style.transform =
    "translateX(-" + (googleMapCarouselCurrent * 100) + "%)";

  // ドットの選択状態を解除
  googleMapCarouselDots.forEach(function(dot){

    dot.classList.remove("is-active");

  });

  // 現在のドットを選択状態にする
  googleMapCarouselDots[googleMapCarouselCurrent].classList.add("is-active");

}

// 前へボタン
googleMapCarouselPrev.addEventListener("click", function(){

  googleMapCarouselShow(googleMapCarouselCurrent - 1);

});

// 次へボタン
googleMapCarouselNext.addEventListener("click", function(){

  googleMapCarouselShow(googleMapCarouselCurrent + 1);

});

// ドットナビ
googleMapCarouselDots.forEach(function(dot){

  dot.addEventListener("click", function(){

    googleMapCarouselShow(Number(this.dataset.index));

  });

});

// 初期表示
googleMapCarouselShow(0);

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでGoogleマップカルーセルのレイアウトを作成し、CSSでレイアウトやボタン、ドットナビのデザインを設定します。JavaScriptでは前へ・次へボタンやドットナビをクリックした際のスライド切り替えを制御しています。

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

sample/index.html をブラウザで開くと動作を確認できます。場所名は index.html の google-map-carousel_title を編集することで変更できます。Googleマップの表示場所は各 iframe の src 属性を変更して指定します。例えば q=東京駅 を q=大阪駅 に変更すると大阪駅の地図が表示されます。住所や施設名なども指定できます。緯度・経度を使用する場合は q=35.681236,139.767125 のように q=緯度,経度 の形式で指定してください。例えば東京駅は q=35.681236,139.767125、大阪駅は q=34.702485,135.495951 のように指定できます。カルーセルの切り替え速度は style.css の transition: transform .45s ease; を変更します。.45s = 0.45秒で、数値を大きくすると切り替えがゆっくりになり、小さくすると速くなります。