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

Googleマップをトーストに表示する方法

Googleマップをトーストに表示する方法を紹介します。このサンプルでは、ボタンをクリックすると画面右下にトーストが表示され、その中へGoogleマップを埋め込みます。Googleマップから取得できる埋め込みURLをiframeへ設定するため、Google Maps JavaScript APIやAPIキーを使用せずに実装できます。

店舗サイトのアクセス案内、会社概要ページの所在地表示、イベント会場の案内、施設紹介ページなど、必要なときだけ地図を表示したい場面に利用できます。通常時は地図を非表示にしておき、「地図を表示」ボタンをクリックしたときだけ画面右下へ表示するため、ページ内のコンテンツを大きく占有せずにGoogleマップを確認できます。「×」ボタンをクリックするとトーストを閉じられます。

HTMLではGoogleマップの埋め込みURLやトースト内のタイトルを変更でき、CSSではトーストの横幅、位置、余白、角丸、影、地図の高さなどを調整できます。画面幅が狭い場合はトーストとGoogleマップが画面内へ収まるようにサイズを変更するため、スマートフォン・タブレット・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-toast_wrap">

    <!-- タイトル -->
    <div class="google-map-toast_title">
      Googleマップをトーストに表示
    </div>

    <!-- 説明文 -->
    <p class="google-map-toast_text">
      ボタンをクリックすると、画面右下のトースト内にGoogleマップを表示します。
    </p>

    <!-- 地図を表示するボタン -->
    <button
      type="button"
      class="google-map-toast_button"
      data-google-map-toast-open="">
      地図を表示
    </button>

  </div>

  <!-- Googleマップを表示するトースト -->
  <div class="google-map-toast_message" data-google-map-toast="">

    <!-- トースト上部 -->
    <div class="google-map-toast_header">

      <!-- トーストタイトル -->
      <div class="google-map-toast_heading">
        Googleマップ
      </div>

      <!-- 閉じるボタン -->
      <button
        type="button"
        class="google-map-toast_close"
        data-google-map-toast-close=""
        aria-label="Googleマップを閉じる">
        ×
      </button>

    </div>

    <!--
      【Googleマップの埋め込みURLの設定方法】

      1. Googleマップで表示したい場所を検索します。
      2. 「共有」をクリックします。
      3. 「地図を埋め込む」を選択します。
      4. 「HTMLをコピー」をクリックします。
      5. コピーしたiframeコード内の src="..." のURLを使用します。
      6. YOUR_GOOGLE_MAP_EMBED_URL を取得したURLへ置き換えてください。

      このサンプルではGoogle Maps JavaScript APIを使用しないため、
      APIキーやMap IDは必要ありません。
    -->
    <iframe
      class="google-map-toast_frame"
      src="YOUR_GOOGLE_MAP_EMBED_URL"
      title="Googleマップ"
      loading="lazy">
    </iframe>

  </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-map-toast_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* 内容を中央揃えにする */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.google-map-toast_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
}

/* 説明文 */
.google-map-toast_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとボタンとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}

/* 地図を表示するボタン */
.google-map-toast_button{
  padding:12px 24px; /* 上下12px・左右24px。値を大きくするとボタンが大きくなる */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸 */
  background:#0b6bff; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンの文字を太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}

/* Googleマップを表示するトースト */
.google-map-toast_message{
  position:fixed; /* 画面を基準に固定 */
  right:24px; /* 画面右端から24px離す */
  bottom:24px; /* 画面下端から24px離す */
  z-index:9999; /* 他の要素より前面へ表示 */
  width:min(520px,calc(100vw - 48px)); /* 最大520pxで画面幅に合わせて縮小 */
  padding:18px; /* トースト内側の余白 */
  border-radius:12px; /* トーストの角丸 */
  background:#ffffff; /* トーストの背景色 */
  box-shadow:0 12px 30px rgba(0,0,0,.18); /* トーストの影 */
  box-sizing:border-box; /* paddingを横幅へ含める */
  opacity:0; /* 通常時は透明 */
  transform:translateY(12px); /* 通常時は12px下へ移動 */
  pointer-events:none; /* 非表示時のクリック操作を無効化 */
  transition:.3s; /* 0.3秒で表示状態を切り替える */
}

/* トースト表示時 */
.google-map-toast_message.is-show{
  opacity:1; /* トーストを表示 */
  transform:translateY(0); /* 元の位置へ戻す */
  pointer-events:auto; /* トースト内を操作できるようにする */
}

/* トースト上部 */
.google-map-toast_header{
  display:flex; /* タイトルと閉じるボタンを横並びにする */
  align-items:center; /* 縦方向の位置を中央に揃える */
  justify-content:space-between; /* 左右へ分けて配置 */
  gap:16px; /* タイトルと閉じるボタンの間隔 */
  margin:0 0 14px; /* 下側14pxの余白 */
}

/* トーストタイトル */
.google-map-toast_heading{
  font-size:16px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  color:#111827; /* タイトルの文字色 */
}

/* 閉じるボタン */
.google-map-toast_close{
  width:36px; /* ボタンの横幅 */
  height:36px; /* ボタンの高さ */
  padding:0; /* 内側余白を削除 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸 */
  background:#f1f5f9; /* ボタンの背景色 */
  color:#111827; /* ×の色 */
  font-size:22px; /* ×の文字サイズ */
  line-height:1; /* 行の高さを調整 */
  cursor:pointer; /* マウスカーソルをポインターにする */
}

/* Googleマップ表示エリア */
.google-map-toast_frame{
  display:block; /* iframe下部の余分な隙間を防ぐ */
  width:100%; /* トーストの横幅いっぱいに表示 */
  height:360px; /* 地図の高さ。値を大きくすると表示領域が高くなる */
  border:0; /* iframeの枠線を削除 */
  border-radius:8px; /* 地図表示部分の角丸 */
  background:#f1f5f9; /* 読み込み前などの背景色 */
}

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

  /* 操作エリア全体 */
  .google-map-toast_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* Googleマップを表示するトースト */
  .google-map-toast_message{
    right:16px; /* 画面右端から16px離す */
    bottom:16px; /* 画面下端から16px離す */
    width:calc(100vw - 32px); /* 左右16pxずつ余白を確保 */
    padding:14px; /* スマートフォンでは内側余白を小さくする */
  }

  /* Googleマップ表示エリア */
  .google-map-toast_frame{
    height:300px; /* スマートフォンでは地図の高さを300pxにする */
  }

}

/* 地図を表示するボタンを取得 */
const googleMapToastOpen=document.querySelector('[data-google-map-toast-open]');

/* トーストを閉じるボタンを取得 */
const googleMapToastClose=document.querySelector('[data-google-map-toast-close]');

/* Googleマップを表示するトーストを取得 */
const googleMapToast=document.querySelector('[data-google-map-toast]');

/* 「地図を表示」をクリックしたとき */
googleMapToastOpen.addEventListener('click',function(){

  /* is-showクラスを追加してトーストを表示 */
  googleMapToast.classList.add('is-show');

});

/* 「×」をクリックしたとき */
googleMapToastClose.addEventListener('click',function(){

  /* is-showクラスを削除してトーストを閉じる */
  googleMapToast.classList.remove('is-show');

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「地図を表示」ボタンと、Googleマップを表示するiframeを含んだトーストを作成します。CSSでは操作エリアやトーストの位置、横幅、余白、角丸、影、Googleマップの表示サイズなどを設定し、JavaScriptではボタンをクリックしたときの表示・非表示を切り替えます。

GoogleマップはGoogle Maps JavaScript APIではなく、Googleマップの「地図を埋め込む」から取得できる埋め込みURLをiframeのsrc属性へ設定して表示します。そのため、このサンプルではAPIキーやMap IDは使用しません。利用する際は、表示したい場所のGoogleマップ埋め込みURLを利用者自身で取得し、index.htmlのYOUR_GOOGLE_MAP_EMBED_URLへ設定します。

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

各ファイルの役割
index.htmlは、操作エリアとGoogleマップを表示するトーストを構成するファイルです。「Googleマップをトーストに表示」のタイトル、説明文、「地図を表示」ボタン、トースト内の「Googleマップ」という表示、閉じるボタン、Googleマップを読み込むiframeが含まれています。表示する場所を変更する場合は、iframeのsrc="YOUR_GOOGLE_MAP_EMBED_URL"を編集します。

style.cssは、操作エリアとトーストのデザインを設定するファイルです。操作エリアの横幅や余白、ボタンの色、トーストの表示位置、横幅、角丸、影、Googleマップの高さなどを変更できます。また、トーストは通常時には透明な状態で画面右下に配置され、is-showクラスが付くと表示される構成です。

script.jsは、トーストの表示と非表示を切り替えるファイルです。「地図を表示」ボタンをクリックするとトーストへis-showクラスを追加し、「×」ボタンをクリックするとis-showクラスを削除します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。index.htmlからstyle.cssとscript.jsを読み込む構成になっているため、3ファイルは同じ階層へ保存してください。次に、トーストへ表示する場所のGoogleマップ埋め込みURLを用意します。

Googleマップで表示したい場所を検索し、「共有」をクリックします。共有画面から「地図を埋め込む」を選択し、「HTMLをコピー」をクリックしてください。コピーされるiframeコードの中にsrc="..."があります。このsrc属性に入っているURL部分を使用します。

取得した埋め込みURLを、index.htmlにあるYOUR_GOOGLE_MAP_EMBED_URLへ置き換えてください。iframeタグ全体を貼り付けるのではなく、src属性へ指定されているURLだけを設定します。この実装ではGoogle Maps JavaScript APIを使用していないため、APIキーやMap IDの取得・設定は必要ありません。設定後にsample/index.htmlをブラウザで開き、「地図を表示」をクリックすると画面右下のトースト内へGoogleマップが表示されます。「×」をクリックするとトーストが閉じます。

カスタマイズできる内容
index.htmlでは、操作エリアのタイトル、説明文、「地図を表示」ボタンの文章、トースト内のタイトルを変更できます。また、YOUR_GOOGLE_MAP_EMBED_URLへ別のGoogleマップ埋め込みURLを設定することで、トースト内へ表示する場所を変更できます。

style.cssでは、操作エリアの最大横幅、余白、背景色、角丸、ボタンの背景色、トーストの表示位置、横幅、余白、角丸、影、Googleマップの高さなどを変更できます。トーストのrightとbottomを調整すると、画面右端・下端からの距離を変更できます。

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

margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
操作エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がります。

border-radius:18px;
操作エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
操作エリアのタイトル文字サイズです。値を大きくすると文字が大きくなります。

padding:12px 24px;
「地図を表示」ボタンの内側余白です。上下の12pxと左右の24pxを変更するとボタンの大きさが変わります。

right:24px;
トーストと画面右端との間隔です。値を大きくすると画面右端から離れます。

bottom:24px;
トーストと画面下端との間隔です。値を大きくすると画面下端から離れます。

width:min(520px,calc(100vw - 48px));
トーストの横幅です。520pxが最大横幅となり、それより画面が狭い場合は画面幅に合わせて縮小されます。

padding:18px;
トーストの内側余白です。値を大きくするとトーストの枠と内容の間隔が広がります。

border-radius:12px;
トースト全体の角丸です。値を大きくすると丸みが強くなります。

box-shadow:0 12px 30px rgba(0,0,0,.18);
トーストへ表示する影です。12pxや30pxを変更すると、影の位置や広がり方が変わります。

transform:translateY(12px);
非表示時のトーストを下方向へ12px移動します。値を大きくすると表示時の移動距離が大きくなります。

transition:.3s;
トーストの表示状態が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

width:36px;・height:36px;
「×」ボタンの横幅と高さです。値を大きくすると閉じるボタンが大きくなります。

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

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの操作エリアにはwidth:100%とmax-width:700pxを指定し、トーストにはwidth:min(520px,calc(100vw - 48px))を指定しているため、画面幅に合わせて横幅が縮小されます。Googleマップを表示するiframeにもwidth:100%を指定しているため、トーストの横幅に合わせて表示されます。

画面幅640px以下では、操作エリアの余白をpadding:24px 18px;へ変更し、トーストを右端・下端から16pxの位置へ配置します。トーストの横幅はcalc(100vw - 32px)となり、Googleマップの高さも360pxから300pxへ変更されるため、スマートフォン・タブレット・PCで利用できます。