Googleマップをドロップダウンメニューに表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

Googleマップをドロップダウンメニューに表示する方法

Googleマップをドロップダウンメニューに表示する方法を紹介します。このサンプルでは、「地図メニュー」をクリックすると「東京」「大阪」「名古屋」の3つの項目が表示され、それぞれの項目をクリックすると、その項目の下へ対応するGoogleマップが展開されます。もう一度同じ項目をクリックすると地図を閉じることができ、別の場所を開いた場合は、それまで表示していた地図を閉じて選択した地図へ切り替えます。

複数店舗を掲載する店舗サイト、支店や営業所を案内する会社サイト、施設一覧、イベント会場のアクセス案内など、複数地点のGoogleマップを1つのメニュー内へまとめたい場面で利用できます。東京・大阪・名古屋の地図を最初からすべて表示する必要がなく、必要な場所だけをドロップダウンメニュー内で確認できるため、ページ内の表示スペースを抑えながら複数のアクセス情報を整理できます。

Googleマップはiframeを使用して表示します。この実装ではGoogle Maps JavaScript APIを使用せず、Googleマップの埋め込みURLを利用する構成です。HTMLではメニュー項目の名前や各地点のGoogleマップを変更でき、CSSではメニューの横幅、余白、背景色、枠線、角丸、地図の高さなどを調整できます。JavaScriptでは「地図メニュー」の開閉と、東京・大阪・名古屋それぞれの地図の表示切り替えを行います。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

「地図メニュー」をクリックすると東京・大阪・名古屋が表示されます。各場所をクリックすると、その項目の下に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="googlemap-dropdown-menu_wrap">

    <!-- タイトル -->
    <div class="googlemap-dropdown-menu_title">
      Googleマップをドロップダウンメニューに表示
    </div>

    <!-- 説明文 -->
    <p class="googlemap-dropdown-menu_text">
      メニューを開き、場所をクリックするとその項目の下にGoogleマップを表示します。
    </p>

    <!-- ドロップダウンメニュー配置エリア -->
    <div class="googlemap-dropdown-menu_group">

      <!-- ドロップダウンメニュー本体 -->
      <div class="googlemap-dropdown-menu_area">

        <!-- メニュー開閉ボタン -->
        <button
          class="googlemap-dropdown-menu_button"
          type="button"
          data-googlemap-dropdown-menu-button="">
          地図メニュー
          <span class="googlemap-dropdown-menu_arrow">▼</span>
        </button>

        <!-- 場所一覧 -->
        <ul
          class="googlemap-dropdown-menu_list"
          data-googlemap-dropdown-menu-list="">

          <!-- 東京 -->
          <li class="googlemap-dropdown-menu_item">

            <!-- 東京の地図を開閉するボタン -->
            <button
              type="button"
              class="googlemap-dropdown-menu_map-button"
              data-googlemap-dropdown-map-button="1">
              東京
            </button>

            <!-- 東京のGoogleマップ表示エリア -->
            <div
              class="googlemap-dropdown-menu_map"
              data-googlemap-dropdown-map="1">

              <!--
                【Googleマップの埋め込み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は不要です。
              -->
              <iframe
                class="googlemap-dropdown-menu_frame"
                src="YOUR_GOOGLE_MAP_EMBED_URL_1"
                title="東京のGoogleマップ"
                loading="lazy">
              </iframe>

            </div>

          </li>

          <!-- 大阪 -->
          <li class="googlemap-dropdown-menu_item">

            <!-- 大阪の地図を開閉するボタン -->
            <button
              type="button"
              class="googlemap-dropdown-menu_map-button"
              data-googlemap-dropdown-map-button="2">
              大阪
            </button>

            <!-- 大阪のGoogleマップ表示エリア -->
            <div
              class="googlemap-dropdown-menu_map"
              data-googlemap-dropdown-map="2">

              <!--
                【大阪のGoogleマップ設定】

                Googleマップから表示したい場所の
                埋め込みURLを取得し、
                YOUR_GOOGLE_MAP_EMBED_URL_2 を
                取得したURLへ置き換えてください。
              -->
              <iframe
                class="googlemap-dropdown-menu_frame"
                src="YOUR_GOOGLE_MAP_EMBED_URL_2"
                title="大阪のGoogleマップ"
                loading="lazy">
              </iframe>

            </div>

          </li>

          <!-- 名古屋 -->
          <li class="googlemap-dropdown-menu_item">

            <!-- 名古屋の地図を開閉するボタン -->
            <button
              type="button"
              class="googlemap-dropdown-menu_map-button"
              data-googlemap-dropdown-map-button="3">
              名古屋
            </button>

            <!-- 名古屋のGoogleマップ表示エリア -->
            <div
              class="googlemap-dropdown-menu_map"
              data-googlemap-dropdown-map="3">

              <!--
                【名古屋のGoogleマップ設定】

                Googleマップから表示したい場所の
                埋め込みURLを取得し、
                YOUR_GOOGLE_MAP_EMBED_URL_3 を
                取得したURLへ置き換えてください。
              -->
              <iframe
                class="googlemap-dropdown-menu_frame"
                src="YOUR_GOOGLE_MAP_EMBED_URL_3"
                title="名古屋のGoogleマップ"
                loading="lazy">
              </iframe>

            </div>

          </li>

        </ul>

      </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マップドロップダウンメニュー全体 */
.googlemap-dropdown-menu_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を横幅へ含める */
}

/* タイトル */
.googlemap-dropdown-menu_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.googlemap-dropdown-menu_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとメニューとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* ドロップダウンメニュー配置エリア */
.googlemap-dropdown-menu_group{
  display:flex; /* メニューを配置するためにflexを使用 */
  justify-content:center; /* メニューを左右中央へ配置 */
}

/* ドロップダウンメニュー本体 */
.googlemap-dropdown-menu_area{
  position:relative; /* メニュー一覧の配置基準にする */
  width:100%; /* 親要素の横幅に合わせる */
  max-width:420px; /* メニューの最大横幅。値を大きくすると横に広がる */
}

/* メニュー開閉ボタン */
.googlemap-dropdown-menu_button{
  display:flex; /* 文字と矢印を横並びにする */
  align-items:center; /* 上下中央へ配置 */
  justify-content:space-between; /* 文字と矢印を左右へ配置 */
  width:100%; /* 横幅いっぱいに表示 */
  min-height:52px; /* ボタンの最小高さ。値を大きくすると高くなる */
  padding:14px 18px; /* 上下14px・左右18pxの内側余白 */
  border:none; /* 標準の枠線を削除 */
  border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
  box-sizing:border-box; /* paddingを横幅へ含める */
}

/* メニューボタンの矢印 */
.googlemap-dropdown-menu_arrow{
  flex-shrink:0; /* 矢印が縮まないようにする */
  margin-left:12px; /* 文字と矢印の間隔 */
  font-size:12px; /* 矢印の文字サイズ */
}

/* 場所一覧 */
.googlemap-dropdown-menu_list{
  display:none; /* 初期状態では非表示 */
  position:absolute; /* メニューボタンを基準に配置 */
  top:calc(100% + 10px); /* ボタンの10px下へ配置 */
  left:0; /* 左端を揃える */
  z-index:10; /* 周囲の要素より手前へ表示 */
  width:100%; /* メニューボタンと同じ横幅 */
  margin:0; /* 標準の外側余白を削除 */
  padding:8px; /* メニュー一覧の内側余白 */
  border:1px solid #e5e7eb; /* メニュー一覧の枠線 */
  border-radius:10px; /* メニュー一覧の角丸 */
  background:#ffffff; /* メニュー一覧の背景色 */
  box-shadow:0 10px 24px rgba(15,23,42,.12); /* メニュー一覧の影 */
  list-style:none; /* リストの記号を削除 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* メニューを開いている状態 */
.googlemap-dropdown-menu_list.is-open{
  display:block; /* 場所一覧を表示 */
}

/* 2件目以降のメニュー項目 */
.googlemap-dropdown-menu_item + .googlemap-dropdown-menu_item{
  margin-top:4px; /* 項目同士の間隔 */
}

/* 場所を選択するボタン */
.googlemap-dropdown-menu_map-button{
  display:block; /* 横幅いっぱいに表示できるようにする */
  width:100%; /* メニュー一覧の横幅いっぱいに表示 */
  padding:12px 14px; /* 上下12px・左右14pxの内側余白 */
  border:none; /* 標準の枠線を削除 */
  border-radius:8px; /* 項目ボタンの角丸 */
  background:#ffffff; /* 項目ボタンの背景色 */
  color:#111827; /* 項目名の文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:15px; /* 項目名の文字サイズ */
  line-height:1.5; /* 項目名の行間 */
  text-align:left; /* 項目名を左揃えにする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}

/* 場所ボタンへマウスを重ねたとき */
.googlemap-dropdown-menu_map-button:hover{
  background:#eff6ff; /* 背景色を薄い青色へ変更 */
}

/* Googleマップ表示エリア */
.googlemap-dropdown-menu_map{
  display:none; /* 初期状態では地図を非表示 */
  margin:8px 0 4px; /* 上8px・下4pxの余白 */
  overflow:hidden; /* 地図が角丸からはみ出さないようにする */
  border-radius:8px; /* 地図表示エリアの角丸 */
  background:#e5e7eb; /* 地図読み込み前の背景色 */
}

/* Googleマップを開いている状態 */
.googlemap-dropdown-menu_map.is-open{
  display:block; /* Googleマップを表示 */
}

/* Googleマップ */
.googlemap-dropdown-menu_frame{
  display:block; /* iframe下部の余計な隙間をなくす */
  width:100%; /* 地図表示エリアの横幅いっぱいに表示 */
  height:240px; /* Googleマップの高さ。値を大きくすると表示領域が高くなる */
  border:0; /* iframeの枠線を削除 */
}

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

  /* Googleマップドロップダウンメニュー全体 */
  .googlemap-dropdown-menu_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

}

// 地図メニューを開閉するボタンを取得
const googlemapDropdownMenuButton=document.querySelector(
  "[data-googlemap-dropdown-menu-button]"
);

// 地図メニューの一覧を取得
const googlemapDropdownMenuList=document.querySelector(
  "[data-googlemap-dropdown-menu-list]"
);

// 東京・大阪・名古屋の各ボタンを取得
const googlemapDropdownMapButtons=document.querySelectorAll(
  "[data-googlemap-dropdown-map-button]"
);

// 「地図メニュー」をクリックしたときの処理
googlemapDropdownMenuButton.addEventListener("click",function(){

  // is-openクラスを追加・削除して場所一覧を開閉する
  googlemapDropdownMenuList.classList.toggle("is-open");

});

// 各場所のボタンへクリック処理を設定
googlemapDropdownMapButtons.forEach(function(button){

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

    // クリックしたボタンに設定されている番号を取得
    const mapNumber=button.dataset.googlemapDropdownMapButton;

    // 番号に対応するGoogleマップ表示エリアを取得
    const selectedMap=document.querySelector(
      '[data-googlemap-dropdown-map="' + mapNumber + '"]'
    );

    // すべてのGoogleマップ表示エリアを取得して確認する
    document.querySelectorAll(
      "[data-googlemap-dropdown-map]"
    ).forEach(function(map){

      // 選択した地図以外が開いている場合は閉じる
      if(map!==selectedMap){

        map.classList.remove("is-open");

      }

    });

    // 選択したGoogleマップの表示・非表示を切り替える
    selectedMap.classList.toggle("is-open");

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「地図メニュー」と東京・大阪・名古屋の3つの項目、それぞれに対応するGoogleマップのiframeを配置します。CSSではドロップダウンメニューやGoogleマップ表示領域の横幅、余白、背景色、角丸などを設定し、JavaScriptではメニューの開閉と各Googleマップの表示切り替えを行います。Googleマップは埋め込みURLを使用して表示するため、利用者自身で表示したい場所の埋め込みURLをGoogleマップから取得し、index.htmlへ設定します。この実装ではGoogle Maps JavaScript APIを使用しないため、APIキーやMap IDは必要ありません。

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

各ファイルの役割
index.htmlはドロップダウンメニューとGoogleマップ表示領域を構成するファイルです。「地図メニュー」の文章、東京・大阪・名古屋の項目名、各Googleマップの埋め込みURLを変更できます。GoogleマップのURLは、YOUR_GOOGLE_MAP_EMBED_URL_1、YOUR_GOOGLE_MAP_EMBED_URL_2、YOUR_GOOGLE_MAP_EMBED_URL_3の3箇所へ設定します。

style.cssはドロップダウンメニューとGoogleマップ表示領域のデザインを設定するファイルです。全体やメニューの横幅、余白、背景色、文字色、枠線、角丸、影、ボタン、Googleマップの高さなどを変更できます。

script.jsはドロップダウンメニューとGoogleマップを開閉するファイルです。「地図メニュー」をクリックすると東京・大阪・名古屋の一覧を開閉します。各場所をクリックすると対応するGoogleマップを表示し、別の場所を選択した場合は、それまで開いていた地図を閉じて選択した地図を表示します。同じ場所をもう一度クリックすると、その地図を閉じます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。次に、Googleマップでドロップダウンメニューへ表示したい場所を検索してください。検索した場所の「共有」をクリックし、「地図を埋め込む」を選択して「HTMLをコピー」をクリックします。

コピーしたHTMLにはGoogleマップを表示するiframeが含まれています。その中にあるsrc="..."のURL部分を使用します。取得した埋め込みURLをindex.htmlにあるプレースホルダーへ設定してください。

東京として表示する地図の埋め込みURLはYOUR_GOOGLE_MAP_EMBED_URL_1、大阪として表示する地図の埋め込みURLはYOUR_GOOGLE_MAP_EMBED_URL_2、名古屋として表示する地図の埋め込みURLはYOUR_GOOGLE_MAP_EMBED_URL_3へ置き換えます。項目名を別の場所へ変更する場合も、それぞれの項目に対応するGoogleマップの埋め込みURLを設定してください。

3つの埋め込みURLを設定したあと、sample/index.htmlをブラウザで開きます。「地図メニュー」をクリックすると場所の一覧が表示され、「東京」「大阪」「名古屋」のいずれかをクリックすると、その項目の下へ設定したGoogleマップが表示されます。

カスタマイズできる内容
index.htmlではタイトル、説明文、「地図メニュー」の文章、東京・大阪・名古屋の項目名、各Googleマップの埋め込みURLを変更できます。店舗名、支店名、施設名などへ項目名を変更し、それぞれに対応するGoogleマップの埋め込みURLを設定することもできます。

style.cssでは全体の横幅や余白、背景色、枠線、角丸、メニューボタンの色、項目ボタンの表示、メニュー一覧の影、Googleマップ表示領域の高さなどを変更できます。

数値調整
style.css
max-width:700px;
サンプル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

margin:40px auto;
サンプル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

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

border-radius:18px;
サンプル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

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

margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとドロップダウンメニューとの間隔が広がり、小さくすると狭くなります。

max-width:420px;
ドロップダウンメニューの最大横幅です。値を大きくするとメニューが横に広がり、小さくすると狭くなります。

min-height:52px;
「地図メニュー」ボタンの最小高さです。値を大きくするとボタンが高くなります。

padding:14px 18px;
「地図メニュー」ボタンの内側余白です。上下の14pxを大きくするとボタンが高くなり、左右の18pxを大きくすると文字と端の間隔が広がります。

top:calc(100% + 10px);
「地図メニュー」ボタンと場所一覧の間隔です。10pxを大きくするとメニュー一覧がボタンから下へ離れます。

padding:8px;
場所一覧の内側余白です。値を大きくすると各項目と一覧の外枠との間隔が広がります。

margin-top:4px;
2件目以降の場所項目との間隔です。値を大きくすると東京・大阪・名古屋の各項目間が広がります。

padding:12px 14px;
各場所を選択するボタンの内側余白です。上下の12pxを大きくすると項目が高くなり、左右の14pxを大きくすると文字と端の間隔が広がります。

height:240px;
各Googleマップの表示領域の高さです。値を大きくすると地図が高く表示され、小さくすると低くなります。

@media (max-width:640px)
画面幅640px以下でスマートフォン向けの表示へ切り替える基準です。この幅以下では全体の内側余白をpadding:24px 18px;へ変更します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは全体とドロップダウンメニューにwidth:100%を指定し、それぞれmax-width:700pxとmax-width:420pxで最大横幅を制限しているため、画面幅に合わせて縮小されます。Googleマップのiframeにもwidth:100%を指定しているため、地図もメニューの横幅に合わせて表示されます。また、画面幅640px以下では全体の内側余白をpadding:24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。