Googleマップをタブ切り替えに表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

Googleマップをタブ切り替えに表示する方法

Googleマップをタブ切り替えに表示する方法を紹介します。このサンプルでは、複数のGoogleマップを1つの表示エリアにまとめ、タブをクリックすると対応する地図へ切り替えられるようにします。HTMLのiframeでGoogleマップを埋め込み、CSSでタブと表示エリアを整え、JavaScriptで選択したタブに対応する地図だけを表示します。

店舗案内や会社案内、支店・営業所のアクセスページなど、複数の場所を1ページで紹介したい場合に利用できます。すべての地図を縦に並べるのではなく、タブごとに表示を切り替えられるため、地図をまとめて見やすく配置できます。タブをクリックするだけで表示地点を変更できるので、複数店舗を掲載するWebサイトにも導入しやすい構成です。

タブ名やGoogleマップの埋め込みURLはHTMLから変更でき、CSSでは全体の横幅、余白、タブの色、枠線、角丸、地図の高さなどを調整できます。画面幅に合わせて全体とiframeが縮小するレスポンシブ対応としているため、スマートフォン・タブレット・PCで利用できます。HTML・CSS・バニラJavaScriptで構成した、カスタマイズしやすいサンプルです。

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

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

デモ

Googleマップをタブ切り替えで表示

タブをクリックすると、東京・大阪・名古屋のGoogleマップへ切り替わります。

東京

大阪

名古屋

「東京」「大阪」「名古屋」のタブをクリックすると、対応するGoogleマップへ表示が切り替わります。

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

<!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-tab-switch_wrap">

    <!-- タイトル -->
    <div class="google-map-tab-switch_title">
      Googleマップをタブ切り替えで表示
    </div>

    <!-- 説明文 -->
    <p class="google-map-tab-switch_text">
      タブをクリックすると、表示するGoogleマップを切り替えられます。
    </p>

    <!-- タブ一覧 -->
    <div class="google-map-tab-switch_tabs">

      <button
        class="google-map-tab-switch_tab is-active"
        type="button"
        data-tab="map1">
        地図1
      </button>

      <button
        class="google-map-tab-switch_tab"
        type="button"
        data-tab="map2">
        地図2
      </button>

      <button
        class="google-map-tab-switch_tab"
        type="button"
        data-tab="map3">
        地図3
      </button>

    </div>

    <!-- 地図1 -->
    <div
      class="google-map-tab-switch_panel is-active"
      data-panel="map1">

      <p class="google-map-tab-switch_label">
        地図1
      </p>

      <div class="google-map-tab-switch_frame">

        <!--
          Googleマップの埋め込みURLをsrc属性へ設定します。

          【埋め込みURLの調べ方】
          1. Googleマップで表示したい場所を検索します。
          2. 「共有」をクリックします。
          3. 「地図を埋め込む」を選択します。
          4. 「HTMLをコピー」をクリックします。
          5. コピーしたiframeコード内の
             src="..." に書かれているURLだけをコピーします。
          6. 下記の YOUR_GOOGLE_MAP_EMBED_URL_1 を
             コピーしたURLへ置き換えてください。

          このサンプルではGoogle Maps JavaScript APIを使用しないため、
          APIキーやMap IDをJavaScriptへ設定する必要はありません。
        -->
        <iframe
          src="YOUR_GOOGLE_MAP_EMBED_URL_1"
          title="地図1"
          loading="lazy"
          allowfullscreen>
        </iframe>

      </div>

    </div>

    <!-- 地図2 -->
    <div
      class="google-map-tab-switch_panel"
      data-panel="map2">

      <p class="google-map-tab-switch_label">
        地図2
      </p>

      <div class="google-map-tab-switch_frame">

        <!--
          YOUR_GOOGLE_MAP_EMBED_URL_2 を、
          2つ目に表示したいGoogleマップの埋め込みURLへ
          置き換えてください。
        -->
        <iframe
          src="YOUR_GOOGLE_MAP_EMBED_URL_2"
          title="地図2"
          loading="lazy"
          allowfullscreen>
        </iframe>

      </div>

    </div>

    <!-- 地図3 -->
    <div
      class="google-map-tab-switch_panel"
      data-panel="map3">

      <p class="google-map-tab-switch_label">
        地図3
      </p>

      <div class="google-map-tab-switch_frame">

        <!--
          YOUR_GOOGLE_MAP_EMBED_URL_3 を、
          3つ目に表示したいGoogleマップの埋め込みURLへ
          置き換えてください。
        -->
        <iframe
          src="YOUR_GOOGLE_MAP_EMBED_URL_3"
          title="地図3"
          loading="lazy"
          allowfullscreen>
        </iframe>

      </div>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* 基本文字色 */
  font-family:sans-serif; /* 使用するフォント */
}

/* Googleマップのタブ切り替え全体 */
.google-map-tab-switch_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.google-map-tab-switch_title{
  margin:0 0 12px; /* タイトル下の余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.google-map-tab-switch_text{
  margin:0 0 24px; /* タブとの間隔 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 中央揃え */
}

/* タブ一覧 */
.google-map-tab-switch_tabs{
  display:flex; /* タブを横並びにする */
  border-bottom:1px solid #d1d5db; /* タブ一覧の下側の枠線 */
}

/* タブ */
.google-map-tab-switch_tab{
  flex:1; /* 3つのタブを同じ横幅にする */
  padding:14px; /* タブの内側余白 */
  border:1px solid #d1d5db; /* タブの枠線 */
  border-bottom:none; /* 下側の枠線を非表示 */
  border-radius:12px 12px 0 0; /* タブ上部の角丸 */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* ページと同じフォントを使用 */
  font-weight:700; /* 文字を太字にする */
  cursor:pointer; /* マウスポインターを変更 */
}

/* 2つ目以降のタブ */
.google-map-tab-switch_tab + .google-map-tab-switch_tab{
  margin-left:6px; /* タブ同士の間隔 */
}

/* 選択中のタブ */
.google-map-tab-switch_tab.is-active{
  background:#2563eb; /* 選択中のタブの背景色 */
  color:#ffffff; /* 選択中のタブの文字色 */
}

/* Googleマップのパネル */
.google-map-tab-switch_panel{
  display:none; /* 通常は非表示 */
  padding:18px; /* パネルの内側余白 */
  border:1px solid #d1d5db; /* パネルの枠線 */
  border-top:none; /* 上側の枠線を非表示 */
  background:#ffffff; /* パネルの背景色 */
}

/* 選択中のパネル */
.google-map-tab-switch_panel.is-active{
  display:block; /* 選択中のパネルだけ表示 */
}

/* Googleマップ上部のラベル */
.google-map-tab-switch_label{
  margin:0 0 12px; /* Googleマップとの間隔 */
  font-size:18px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベルを太字にする */
  color:#111827; /* ラベルの文字色 */
}

/* Googleマップ表示エリア */
.google-map-tab-switch_frame{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  height:450px; /* 地図の高さ。値を大きくすると表示領域が高くなる */
}

/* Googleマップ */
.google-map-tab-switch_frame iframe{
  display:block; /* iframe下の余計な隙間をなくす */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  height:100%; /* 親要素の高さいっぱいに表示 */
  border:1px solid #e5e7eb; /* 地図を囲む枠線 */
  border-radius:12px; /* 地図の角丸。値を大きくすると丸みが強くなる */
  box-sizing:border-box; /* borderをサイズへ含める */
}

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

  /* タブ切り替え全体 */
  .google-map-tab-switch_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* タブ */
  .google-map-tab-switch_tab{
    padding:12px 8px; /* スマートフォンではタブの余白を小さくする */
  }

  /* パネル */
  .google-map-tab-switch_panel{
    padding:12px; /* スマートフォンではパネルの余白を小さくする */
  }

  /* Googleマップ表示エリア */
  .google-map-tab-switch_frame{
    height:360px; /* スマートフォンでの地図の高さ */
  }

}

/* すべてのタブを取得 */
const googleMapTabSwitchTabs=document.querySelectorAll(
  ".google-map-tab-switch_tab"
);

/* すべてのGoogleマップパネルを取得 */
const googleMapTabSwitchPanels=document.querySelectorAll(
  ".google-map-tab-switch_panel"
);

/* 各タブへクリック処理を設定 */
googleMapTabSwitchTabs.forEach(function(tab){

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

    /* クリックしたタブの切り替え先を取得 */
    const target=tab.dataset.tab;

    /* すべてのタブから選択状態を解除 */
    googleMapTabSwitchTabs.forEach(function(item){

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

    });

    /* すべてのGoogleマップパネルを非表示状態にする */
    googleMapTabSwitchPanels.forEach(function(panel){

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

    });

    /* クリックしたタブを選択状態にする */
    tab.classList.add("is-active");

    /* 対応するGoogleマップパネルを表示 */
    document.querySelector(
      '.google-map-tab-switch_panel[data-panel="'+target+'"]'
    ).classList.add("is-active");

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは3つのタブと、それぞれに対応するGoogleマップのiframeを配置します。CSSではタブや地図表示エリアのデザインとレスポンシブ表示を設定し、JavaScriptではクリックしたタブに対応するGoogleマップだけを表示する処理を行います。

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

各ファイルの役割
index.htmlはタブとGoogleマップを構成するファイルです。「地図1」「地図2」「地図3」のタブ名やラベルを変更できます。また、各iframeのsrc属性へ利用者自身で用意したGoogleマップの埋め込みURLを設定します。

Googleマップの埋め込みURLは、Googleマップで表示したい場所を検索し、「共有」から「地図を埋め込む」を選択して取得できます。「HTMLをコピー」で取得したiframeコードのsrc="..."部分に書かれているURLを使用してください。サンプル内のYOUR_GOOGLE_MAP_EMBED_URL_1、YOUR_GOOGLE_MAP_EMBED_URL_2、YOUR_GOOGLE_MAP_EMBED_URL_3を、それぞれ取得したURLへ置き換えます。このサンプルはGoogle Maps JavaScript APIを使用していないため、APIキーやMap IDをJavaScriptへ設定する必要はありません。

style.cssはタブ切り替え全体の横幅、余白、背景色、枠線、角丸、タブの色、Googleマップの表示サイズなどを設定するファイルです。選択中のタブは青色で表示され、現在選択している地図を確認できます。

script.jsはタブをクリックしたときの切り替え処理を行うファイルです。クリックされたタブのdata-tabを取得し、同じ値を持つdata-panelのパネルだけへis-activeクラスを付けて表示します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で保存します。次にGoogleマップで表示したい場所をそれぞれ検索し、埋め込みURLを取得してください。取得したURLをindex.html内のYOUR_GOOGLE_MAP_EMBED_URL_1からYOUR_GOOGLE_MAP_EMBED_URL_3へ設定します。設定後、sample/index.htmlをブラウザで開くと、3つのタブからGoogleマップを切り替えて表示できます。

カスタマイズできる内容
index.htmlではタイトル、説明文、「地図1」「地図2」「地図3」のタブ名、各地図のラベル、iframeへ表示するGoogleマップの埋め込みURLを変更できます。表示したい店舗、施設、観光地などに合わせて、それぞれ異なるGoogleマップを設定できます。

style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、タブの背景色・文字色、地図表示エリアの高さなどを変更できます。

数値調整
style.css

max-width:700px;
タブ切り替え全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

margin:40px auto;
タブ切り替え全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がります。

border-radius:18px;
タブ切り替え全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

padding:14px;
タブの内側余白です。値を大きくするとタブが大きくなります。

margin-left:6px;
隣り合うタブ同士の間隔です。値を大きくするとタブの間隔が広がります。

padding:18px;
Googleマップを表示するパネルの内側余白です。値を大きくすると地図とパネルの枠線との間隔が広がります。

height:450px;
通常画面でのGoogleマップ表示エリアの高さです。値を大きくすると地図が縦に広く表示され、小さくすると低くなります。

height:360px;
画面幅640px以下でのGoogleマップ表示エリアの高さです。スマートフォンで表示する地図の高さを調整できます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてタブ切り替え全体が縮小されます。Googleマップのiframeにもwidth:100%を指定しているため、親要素の横幅に合わせて表示されます。また、画面幅640px以下では全体・タブ・パネルの余白を小さくし、地図の高さを360pxへ変更しています。スマートフォン・タブレット・PCで利用できる構成です。