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

表示位置・メニュー項目・サイズ・色・余白・閉じ方などを設定して、HTML・CSS・JavaScriptを自動生成できます。

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

Googleマップをドロワーメニューに表示する方法を紹介します。このサンプルでは、「地図を表示」ボタンをクリックすると画面左側からドロワーメニューが開き、その中にGoogleマップを表示します。ページ内へ地図を常時表示するのではなく、必要なときだけ地図を確認できるため、ページの表示内容をすっきりまとめながらアクセス情報を案内できます。

店舗案内、会社概要、施設紹介、イベント会場へのアクセス、問い合わせページなど、住所や周辺地図を見せたい場面で利用できます。ドロワーメニューを開くと「アクセスマップ」と説明文、Googleマップが表示され、「閉じる」ボタンまたはドロワーメニュー外側の背景をクリックすると閉じます。JavaScriptではドロワーメニューの表示・非表示を切り替え、CSSでは左側から表示するアニメーションや背景を暗くする表示を設定しています。

Googleマップはiframeで表示しているため、表示する場所はHTMLのsrc属性を変更して設定できます。タイトル、説明文、ボタンの文章もHTMLから変更でき、CSSではドロワーメニューの横幅、余白、背景色、ボタンの色、影、アニメーション時間などを用途に合わせて調整できます。画面幅が狭い場合は最大横幅と余白が調整されるため、スマートフォン・タブレット・PCで利用しやすいGoogleマップ付きドロワーメニューとして活用できます。

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

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

デモ

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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではGoogleマップを表示するiframeとドロワーメニューの内容を作成し、CSSではドロワーメニューのサイズや背景、ボタン、地図の表示領域、左側から開くアニメーションなどを設定します。JavaScriptでは「地図を表示」ボタンと「閉じる」ボタン、背景部分のクリックを判定して、ドロワーメニューの表示・非表示を切り替えます。

Googleマップはiframeを使用して表示するため、表示したい地点のGoogleマップ埋め込みURLを利用者自身で用意します。Google Maps JavaScript APIを使用する構成ではないため、APIキーやMap IDは必要ありません。表示する住所や施設を変更する場合は、Googleマップから取得した埋め込みURLをindex.htmlのiframeのsrc属性へ設定します。

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

各ファイルの役割
index.htmlはページとドロワーメニューのHTMLを構成するファイルです。「Googleマップをドロワーメニューで表示」のタイトル、説明文、「地図を表示」ボタン、ドロワーメニュー内の「アクセスマップ」、説明文、Googleマップのiframe、「閉じる」ボタンを編集できます。表示するGoogleマップを変更する場合も、このファイルにあるiframeのsrc属性を編集します。

style.cssはページとドロワーメニューのデザインを設定するファイルです。全体の横幅や余白、背景色、ボタンの色や角丸、背景部分の暗さ、ドロワーメニューの横幅や影、Googleマップの縦横比、左側から表示するアニメーションなどを変更できます。

script.jsはドロワーメニューの開閉を行うファイルです。「地図を表示」ボタンをクリックするとis-activeクラスを追加してドロワーメニューを表示し、「閉じる」ボタンまたはドロワーメニュー外側の背景部分をクリックするとis-activeクラスを削除して非表示にします。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルは同じ階層へ保存し、index.htmlからstyle.cssとscript.jsを読み込んで使用します。

次に、ドロワーメニューへ表示したい地点のGoogleマップ埋め込みURLを用意します。Googleマップで表示したい住所や施設名などを検索し、「共有」から「地図を埋め込む」を選択して「HTMLをコピー」を実行します。コピーしたiframeコードのsrc="..."に指定されているURL部分を使用してください。

取得したURLをindex.htmlにあるGoogleマップ用iframeのsrc属性へ設定します。あわせて、必要に応じてtitle属性の「東京駅周辺のGoogleマップ」も実際に表示する場所に合った内容へ変更してください。設定後にsample/index.htmlをブラウザで開き、「地図を表示」をクリックすると画面左側からドロワーメニューが開き、設定したGoogleマップを確認できます。「閉じる」ボタンまたは背景部分をクリックするとドロワーメニューが閉じます。

カスタマイズできる内容
index.htmlではページのタイトル、説明文、「地図を表示」のボタン名、ドロワーメニュー内のタイトルと説明文、「閉じる」のボタン名を変更できます。Googleマップのiframeに設定するsrc属性を変更すれば、ドロワーメニュー内へ表示する地点を変更できます。

style.cssではページ全体やドロワーメニューの背景色、文字色、ボタンの色、余白、角丸、影などを変更できます。width:420px;でドロワーメニューの横幅、background:rgba(0,0,0,.5);で表示中の背景の暗さ、aspect-ratio:16 / 9;でGoogleマップ表示エリアの縦横比を調整できます。

左側から表示する動きはstyle.cssの@keyframes google-map-drawer-menu_slideで設定しています。JavaScript側ではis-activeクラスの追加・削除によって表示状態を切り替えているため、表示する地図や文章、デザインを変更しても開閉処理はそのまま利用できます。

数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がります。

max-width:700px;
最初に表示する案内部分の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
案内部分の上下余白です。40pxを大きくすると上下の間隔が広がります。

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

border-radius:18px;
案内部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

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

margin:0 0 24px;
最初の説明文の下側余白です。24pxを大きくすると「地図を表示」ボタンとの間隔が広がります。

padding:12px 24px;
「地図を表示」ボタンの内側余白です。12pxが上下、24pxが左右の余白です。

background:rgba(0,0,0,.5);
ドロワーメニュー表示中の背景の暗さです。.5を大きくすると背景が濃くなり、小さくすると薄くなります。

z-index:9999;
ドロワーメニュー表示時の重なり順です。値が大きいほど前面へ配置されます。

width:420px;
ドロワーメニューの横幅です。値を大きくすると横に広がり、小さくすると狭くなります。

max-width:90%;
ドロワーメニューが小さい画面で広がりすぎないようにする最大横幅です。画面幅に対して90%までの幅になります。

padding:28px;
ドロワーメニュー内側の余白です。値を大きくすると内容と端の間隔が広がります。

box-shadow:10px 0 40px rgba(0,0,0,.2);
ドロワーメニュー右側に表示する影です。10pxは横方向の位置、40pxはぼかしの大きさです。値を変更すると影の位置や広がりが変化します。

animation:google-map-drawer-menu_slide .35s ease forwards;
ドロワーメニューが左側から表示されるアニメーション時間です。0.35秒で表示され、値を大きくするとゆっくり、小さくすると速くなります。

aspect-ratio:16 / 9;
Googleマップ表示エリアの縦横比です。現在は16:9の比率で表示されます。

margin-bottom:24px;
Googleマップと「閉じる」ボタンの間隔です。値を大きくすると間隔が広がります。

transform:translateX(-100%);
アニメーション開始時にドロワーメニューを自身の横幅分だけ左側へ移動させる設定です。アニメーションによってtranslateX(0)まで移動し、元の位置へ表示されます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。ドロワーメニューにはstyle.cssのwidth:420px;とmax-width:90%;を設定しているため、画面幅が狭い場合は画面内へ収まるように横幅が調整されます。Googleマップ表示エリアにはwidth:100%とaspect-ratio:16 / 9;を使用し、iframeにもwidth:100%とheight:100%を設定しているため、ドロワーメニューの横幅に合わせて地図が表示されます。

また、640px以下では案内部分の余白をpadding:24px 18px;、ドロワーメニューの余白をpadding:24px 20px;へ変更します。画面幅に合わせて余白を抑えることで、スマートフォン・タブレット・PCで利用できる構成になっています。