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

Googleマップをドロワーメニューで表示する方法

Googleマップをドロワーメニューで表示する方法を紹介します。ドロワーメニュー内にGoogleマップを埋め込むことで、ページ遷移せずに店舗や会社の所在地を確認できるため、限られた画面スペースを有効活用できます。本記事では、HTML・CSS・JavaScriptだけを使って、ボタンをクリックするとドロワーメニューが開き、その中へGoogleマップを表示する方法を解説します。

サンプルコードでは、「地図を表示」ボタンをクリックすると画面左側からドロワーメニューが表示され、その中に埋め込まれたGoogleマップを確認できます。「閉じる」ボタンだけでなく、背景部分をクリックしてもドロワーメニューを閉じられるため、実際のWebサイトでも使いやすい操作性になっています。Googleマップの表示場所はiframeのURLを変更するだけで簡単に差し替えられます。

店舗紹介ページや企業サイト、お問い合わせページ、不動産サイト、イベントページなど、アクセス情報を分かりやすく案内したい場面におすすめです。地図の表示地点はHTMLから変更でき、ドロワーメニューの幅や色、余白、背景のデザインなどはCSSで自由に調整できます。シンプルな構成なので、自分のWebサイトに合わせてカスタマイズしやすいサンプルとして活用できます。

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

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

デモ

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>

  <!-- デモ全体 -->
  <div class="google-map-drawer-menu_wrap">

    <!-- タイトル -->
    <h1 class="google-map-drawer-menu_title">
      Googleマップをドロワーメニューで表示
    </h1>

    <!-- 説明文 -->
    <p class="google-map-drawer-menu_text">
      ボタンをクリックすると、ドロワーメニュー内にGoogleマップを表示できます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button
      class="google-map-drawer-menu_open"
      type="button"
      data-drawer-open>
      地図を表示
    </button>

  </div>

  <!-- ドロワーメニュー表示時の背景 -->
  <div
    class="google-map-drawer-menu_overlay"
    data-drawer-overlay>

    <!-- ドロワーメニュー本体 -->
    <div
      class="google-map-drawer-menu_drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="google-map-drawer-menu-title">

      <!-- ドロワーメニューのタイトル -->
      <div
        class="google-map-drawer-menu_drawer-title"
        id="google-map-drawer-menu-title">
        アクセスマップ
      </div>

      <!-- ドロワーメニューの説明文 -->
      <p class="google-map-drawer-menu_drawer-text">
        ドロワーメニュー内でGoogleマップを確認できます。
      </p>

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

        <!--
          Googleマップ
          src属性へ表示したい地点のGoogleマップ埋め込みURLを指定する。

          埋め込みURLの取得手順
          1. Googleマップで表示したい住所・施設名・緯度経度を検索する
          2. 「共有」をクリックする
          3. 「地図を埋め込む」を選択する
          4. 「HTMLをコピー」をクリックする
          5. コピーしたiframe内のsrc属性のURLを下記iframeへ貼り付ける
        -->
        <iframe
          src="https://www.google.com/maps?q=Tokyo%20Station&amp;output=embed"
          title="東京駅周辺のGoogleマップ"
          loading="lazy">
        </iframe>

      </div>

      <!-- ドロワーメニューを閉じるボタン -->
      <button
        class="google-map-drawer-menu_close"
        type="button"
        data-drawer-close>
        閉じる
      </button>

    </div>

  </div>

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

</body>
</html>

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

/* デモ全体 */
.google-map-drawer-menu_wrap{
  max-width:700px; /* 最大横幅：変更するとデモ全体の幅が変わる */
  margin:40px auto; /* 上下余白・中央配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:18px; /* 角丸 */
  background:#f8fafc; /* 背景色 */
  text-align:center; /* 中央揃え */
  box-sizing:border-box; /* paddingを幅に含める */
}

/* タイトル */
.google-map-drawer-menu_title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* 説明文 */
.google-map-drawer-menu_text{
  margin:0 0 24px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間：値を大きくすると行間が広がる */
}

/* 地図を表示するボタン */
.google-map-drawer-menu_open{
  padding:12px 24px; /* 内側余白 */
  border:none; /* 枠線なし */
  border-radius:8px; /* 角丸 */
  background:#0b6bff; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソル */
}

/* ドロワーメニュー表示時の背景 */
.google-map-drawer-menu_overlay{
  display:none; /* 初期状態は非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 全画面表示 */
  z-index:9999; /* 最前面へ配置 */
  align-items:stretch; /* 高さを画面全体へ広げる */
  justify-content:flex-start; /* 左側へ配置 */
  background:rgba(0,0,0,.5); /* 背景の暗さ：.5を大きくすると濃くなる */
}

/* ドロワーメニュー表示時 */
.google-map-drawer-menu_overlay.is-active{
  display:flex; /* 背景とドロワーメニューを表示 */
}

/* ドロワーメニュー本体 */
.google-map-drawer-menu_drawer{
  width:420px; /* 横幅：変更するとドロワーメニューの幅が変わる */
  max-width:90%; /* 小さい画面で画面幅を超えないようにする */
  height:100%; /* 画面の高さに合わせる */
  padding:28px; /* 内側余白 */
  overflow-y:auto; /* 内容が多い場合に縦スクロール */
  background:#ffffff; /* 背景色 */
  box-sizing:border-box; /* paddingを幅に含める */
  box-shadow:10px 0 40px rgba(0,0,0,.2); /* 右側の影 */
  animation:google-map-drawer-menu_slide .35s ease forwards; /* 0.35秒で左から表示。値を大きくするとゆっくり動く */
}

/* ドロワーメニューのタイトル */
.google-map-drawer-menu_drawer-title{
  margin:0 0 16px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
}

/* ドロワーメニューの説明文 */
.google-map-drawer-menu_drawer-text{
  margin:0 0 20px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間：値を大きくすると行間が広がる */
}

/* Googleマップ表示エリア */
.google-map-drawer-menu_map{
  width:100%; /* 横幅いっぱい */
  aspect-ratio:16 / 9; /* 地図の縦横比 */
  margin-bottom:24px; /* 下余白 */
}

/* Googleマップ */
.google-map-drawer-menu_map iframe{
  display:block; /* 余分な隙間を防ぐ */
  width:100%; /* 表示エリアの横幅に合わせる */
  height:100%; /* 表示エリアの高さに合わせる */
  border:none; /* 枠線なし */
}

/* 閉じるボタン */
.google-map-drawer-menu_close{
  padding:10px 20px; /* 内側余白 */
  border:none; /* 枠線なし */
  border-radius:8px; /* 角丸 */
  background:#111827; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font-size:15px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* マウスカーソル */
}

/* 左側から表示するアニメーション */
@keyframes google-map-drawer-menu_slide{

  /* アニメーション開始時 */
  from{
    opacity:0; /* 透明な状態 */
    transform:translateX(-100%); /* 画面左側へ隠す */
  }

  /* アニメーション終了時 */
  to{
    opacity:1; /* 不透明な状態 */
    transform:translateX(0); /* 元の位置へ移動 */
  }

}

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

  /* デモ全体 */
  .google-map-drawer-menu_wrap{
    padding:24px 18px; /* 小さい画面で内側余白を狭くする */
  }

  /* ドロワーメニュー本体 */
  .google-map-drawer-menu_drawer{
    padding:24px 20px; /* 小さい画面で内側余白を狭くする */
  }

}

// ドロワーメニューを開くボタンを取得
const drawerOpen=document.querySelector("[data-drawer-open]");

// ドロワーメニューを閉じるボタンを取得
const drawerClose=document.querySelector("[data-drawer-close]");

// ドロワーメニュー表示時の背景を取得
const drawerOverlay=document.querySelector("[data-drawer-overlay]");

// 開くボタンをクリックした時
drawerOpen.addEventListener("click",function(){

  // ドロワーメニューを表示
  drawerOverlay.classList.add("is-active");

});

// 閉じるボタンをクリックした時
drawerClose.addEventListener("click",function(){

  // ドロワーメニューを非表示
  drawerOverlay.classList.remove("is-active");

});

// 背景をクリックした時
drawerOverlay.addEventListener("click",function(event){

  // ドロワーメニュー本体以外の背景がクリックされた場合
  if(event.target===drawerOverlay){

    // ドロワーメニューを非表示
    drawerOverlay.classList.remove("is-active");

  }

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでドロワーメニュー、Googleマップの表示領域、開くボタン、閉じるボタンを作成し、CSSでレイアウトや背景オーバーレイ、スライドアニメーションを設定しています。JavaScriptでは、ボタン操作と背景クリックによるドロワーメニューの開閉を行います。

Googleマップはindex.html内のiframeで表示します。表示したい地点は、Googleマップで住所・施設名・緯度経度を検索し、「共有」から取得した埋め込みURLへ差し替えます。取得したiframe全体ではなく、src属性に指定されているURLをサンプルコードのiframeへ設定してください。

各ファイルを同じsampleフォルダへ配置することで動作します。特別なサーバー処理や外部ライブラリは使用していないため、index.htmlをブラウザで開くだけでドロワーメニューとGoogleマップの表示を確認できます。

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

各ファイルの役割
・index.html：ドロワーメニュー本体、タイトル、説明文、開くボタン、閉じるボタン、Googleマップを表示するiframeを記述します。iframeのsrc属性を変更すると、表示する地点を変更できます。
・style.css：ドロワーメニューの幅、余白、背景色、影、背景オーバーレイ、Googleマップの表示サイズ、スライドアニメーションを設定します。
・script.js：「地図を表示」ボタンでドロワーメニューを開き、「閉じる」ボタンまたは背景クリックで閉じる処理を実装します。

設置方法・使い方
① sampleフォルダを作成します。
② sampleフォルダ内へindex.html・style.css・script.jsを配置します。
③ Googleマップで表示したい住所・施設名・緯度経度を検索します。
④ Googleマップの「共有」をクリックし、「地図を埋め込む」を選択します。
⑤ 「HTMLをコピー」で取得したiframe内のsrc属性のURLを、index.htmlのGoogleマップ用iframeへ貼り付けます。
⑥ 必要に応じてiframeのtitle属性も、表示する地点に合わせて変更します。
⑦ sample/index.htmlをブラウザで開きます。
⑧ 「地図を表示」ボタンをクリックすると、指定した地点のGoogleマップがドロワーメニュー内に表示されます。
⑨ 「閉じる」ボタンまたは背景部分をクリックするとドロワーメニューが閉じます。

カスタマイズできる内容
・index.htmlのiframeにあるsrc属性を変更すると、表示する住所・施設・座標を変更できます。
・index.htmlでは、タイトル、説明文、「地図を表示」「閉じる」のボタン文字を変更できます。
・index.htmlのiframeにあるtitle属性は、表示する地点が分かる内容へ変更できます。
・style.cssでは、ドロワーメニューの横幅、背景色、文字色、余白、影、Googleマップの縦横比を変更できます。
・style.cssの「width:420px;」を変更すると、ドロワーメニューの横幅が変わります。
・style.cssの「aspect-ratio:16 / 9;」を変更すると、Googleマップ表示領域の縦横比が変わります。
・style.cssの「background:rgba(0,0,0,.5);」を変更すると、背景オーバーレイの色と暗さを調整できます。

数値調整
・style.cssの「animation:google-map-drawer-menu_slide .35s ease forwards;」にある「.35s」は、ドロワーメニューが左側から表示されるまでの時間です。値を大きくするとゆっくり、小さくすると速く表示されます。
・style.cssの「width:420px;」はドロワーメニューの横幅です。値を大きくすると広く、小さくすると狭くなります。
・style.cssの「max-width:90%;」は、小さい画面でドロワーメニューが使用できる最大幅です。
・style.cssの「background:rgba(0,0,0,.5);」にある「.5」は背景の透明度です。値を1へ近づけると暗くなり、0へ近づけると明るくなります。
・style.cssの「aspect-ratio:16 / 9;」はGoogleマップ表示領域の縦横比です。比率を変更すると地図の高さが変わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでドロワーメニューに「max-width:90%;」、Googleマップ表示領域に「width:100%;」と「aspect-ratio:16 / 9;」を指定しているため、画面幅に合わせてサイズが調整されます。また、640px以下ではメディアクエリによってデモ全体とドロワーメニューの余白を狭くしています。スマートフォン・タブレット・PCで利用できます。