Googleマップをモーダルウインドウに表示する方法
Googleマップをモーダルウインドウに表示する方法を紹介します。このサンプルでは、通常は地図を画面に表示せず、「地図を表示」ボタンをクリックしたときにモーダルウインドウを開き、その中へGoogleマップをiframeで表示します。地図を常にページ内へ配置する必要がないため、必要なときだけ大きな表示領域で場所を確認できる構成を作成できます。
店舗や会社へのアクセス案内、イベント会場の所在地、施設紹介ページ、お問い合わせ画面など、地図を確認したい場面に利用できます。モーダルウインドウは「×」ボタンで閉じられるほか、モーダル外側の暗い背景部分をクリックして閉じることもできます。ページ内の通常コンテンツとは分けてGoogleマップを表示できるため、地図を配置するためのスペースを常時確保せずに案内できます。
HTMLではタイトルや説明文、ボタンの文章、Googleマップの埋め込みURLを変更でき、CSSではモーダルウインドウの横幅、余白、背景色、角丸、地図の表示比率などを調整できます。地図部分にはiframeを使用し、横幅に合わせて16:9の比率で表示されます。また、画面幅640px以下では余白を小さくするレスポンシブ対応を行っているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ボタンをクリックするとモーダルウインドウ内へGoogleマップを表示します。
「地図を表示」をクリックするとモーダルウインドウ内へGoogleマップを表示します。
※ 配布用コードではGoogleマップの埋め込みURLを変更することで、任意の場所を表示できます。
コードをコピーして使おう！
<!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-modal-window_wrap">
<!-- タイトル -->
<h1 class="google-map-modal-window_title">
Googleマップモーダル
</h1>
<!-- 説明文 -->
<p class="google-map-modal-window_text">
ボタンをクリックするとGoogleマップをモーダルウインドウで表示します。
</p>
<!-- モーダルを開くボタン -->
<button
class="google-map-modal-window_open"
type="button"
data-modal-open>
地図を表示
</button>
</div>
<!-- モーダル背景 -->
<div
class="google-map-modal-window_overlay"
data-modal-overlay>
<!-- モーダル本体 -->
<div
class="google-map-modal-window_modal"
role="dialog"
aria-modal="true"
aria-labelledby="google-map-modal-title">
<!-- モーダルタイトル -->
<div
class="google-map-modal-window_modal-title"
id="google-map-modal-title">
Googleマップ
</div>
<!-- モーダルを閉じるボタン -->
<button
class="google-map-modal-window_close"
type="button"
data-modal-close
aria-label="閉じる">
×
</button>
<!-- Googleマップ表示エリア -->
<div class="google-map-modal-window_map">
<!--
Googleマップ
src属性へGoogleマップの埋め込みURLを指定します。
埋め込みURLはGoogleマップの
「共有」→「地図を埋め込む」→「HTMLをコピー」
から取得できます。
-->
<iframe
src="https://www.google.com/maps?q=Tokyo%20Station&output=embed"
title="Googleマップ">
</iframe>
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「地図を表示」ボタン、モーダル背景、モーダル本体、Googleマップを表示するiframeを配置します。CSSではコンテンツ全体やモーダルの横幅、余白、背景色、角丸、地図の表示比率、表示時のアニメーションなどを設定します。JavaScriptではボタンのクリックに応じてis-activeクラスを追加・削除し、モーダルウインドウの表示と非表示を切り替えます。
Googleマップはiframeの埋め込みURLを使用して表示します。この実装ではGoogle Maps JavaScript APIを使用しないため、APIキーやMap IDは必要ありません。利用する際は、Googleマップから表示したい場所の埋め込みURLを取得し、index.html内のiframeのsrc属性へ設定します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはGoogleマップをモーダルウインドウに表示するHTML構造を作るファイルです。「Googleマップモーダル」のタイトル、説明文、「地図を表示」ボタン、モーダル内のタイトル、「×」ボタン、Googleマップを表示するiframeを記述しています。表示する場所を変更する場合は、iframeのsrc属性を利用者自身で取得したGoogleマップの埋め込みURLへ変更します。
style.cssはコンテンツ全体とモーダルウインドウのデザインを設定するファイルです。全体の最大横幅や余白、背景色、ボタンの色、モーダル本体の横幅、角丸、背景の暗さ、Googleマップの表示比率、表示アニメーションなどを変更できます。
script.jsはモーダルウインドウの開閉を制御するファイルです。「地図を表示」ボタンをクリックするとモーダル背景へis-activeクラスを追加して表示し、「×」ボタンをクリックするとクラスを削除して閉じます。また、モーダル本体ではなく背景部分をクリックした場合にもモーダルを閉じます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。次に、モーダルウインドウへ表示したい場所をGoogleマップで開き、埋め込みURLを取得します。
Googleマップで表示したい場所を開いたあと、「共有」をクリックし、「地図を埋め込む」を選択します。表示された埋め込みコードから、iframeのsrc="..."に記載されているURL部分を使用します。
取得した埋め込みURLを、index.htmlにあるGoogleマップ用iframeのsrc属性へ設定してください。配布コードの次の部分を、取得したURLへ置き換えます。
src="取得したGoogleマップの埋め込みURL"
URLを設定したあと、sample/index.htmlをブラウザで開きます。「地図を表示」ボタンをクリックすると画面中央にモーダルウインドウが開き、指定したGoogleマップが表示されます。「×」ボタンまたはモーダル外側の暗い背景部分をクリックすると閉じます。
カスタマイズできる内容
index.htmlでは「Googleマップモーダル」のタイトル、説明文、「地図を表示」ボタン、モーダル内の「Googleマップ」というタイトル、iframeのtitle、表示するGoogleマップの埋め込みURLを変更できます。別の場所を表示する場合は、Googleマップから新しい埋め込みURLを取得し、iframeのsrc属性を変更してください。
style.cssではコンテンツ全体の最大横幅、余白、背景色、ボタンの色やサイズ、モーダル背景の濃さ、モーダル本体の最大横幅、内側余白、角丸、地図表示エリアの比率、モーダル表示時のアニメーションなどを変更できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。上下の40pxを大きくすると上下の間隔が広がり、左右の20pxを大きくすると画面端との間隔が広がります。
max-width:700px;
「地図を表示」ボタンを配置するコンテンツ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
コンテンツ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
コンテンツ全体とモーダル本体の内側余白です。値を大きくすると内容と端との間隔が広がり、小さくすると狭くなります。
border-radius:18px;
コンテンツ全体とモーダル本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
コンテンツのタイトルとモーダルタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
margin-bottom:20px;
モーダルタイトルとGoogleマップとの間隔です。20pxを大きくすると間隔が広がり、小さくすると狭くなります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると「地図を表示」ボタンとの間隔が広がり、小さくすると狭くなります。
padding:12px 24px;
「地図を表示」ボタンの内側余白です。上下の12pxを大きくするとボタンが高くなり、左右の24pxを大きくすると横に広がります。
background:rgba(0,0,0,.6);
モーダル表示時に画面全体へ重ねる背景色です。最後の.6を大きくすると暗くなり、小さくすると薄くなります。
padding:20px;
モーダル背景の内側余白です。値を大きくするとモーダル本体と画面端との間隔が広がります。
max-width:900px;
モーダル本体の最大横幅です。値を大きくするとGoogleマップの表示領域も広がり、小さくすると狭くなります。
top:12px;・right:12px;
「×」ボタンの位置です。topを大きくすると下へ移動し、rightを大きくすると左へ移動します。
width:36px;・height:36px;
「×」ボタンの横幅と高さです。値を大きくするとボタンが大きくなり、小さくすると小さくなります。
font-size:24px;
「×」の文字サイズです。値を大きくすると記号が大きく表示されます。
aspect-ratio:16/9;
Googleマップ表示エリアの縦横比です。このサンプルでは横16・縦9の比率で表示します。
border-radius:12px;
Googleマップ表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
animation:google-map-modal-window_show .3s ease forwards;
モーダルを表示するときのアニメーション時間です。.3sは0.3秒を表し、値を大きくするとゆっくり、小さくすると速く表示されます。
transform:scale(.9);
モーダル表示アニメーション開始時の大きさです。.9は通常サイズの90％を表し、値を小さくすると表示時の拡大幅が大きくなります。
@media(max-width:640px)
画面幅640px以下でスマートフォン向けの表示へ切り替える基準です。コンテンツ全体をpadding:24px 18px;、モーダル本体をpadding:18px;へ変更します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでモーダル本体にwidth:100%とmax-width:900pxを指定しているため、画面幅が狭くなるとモーダルも自動的に縮小します。Googleマップ表示エリアにはwidth:100%とaspect-ratio:16/9を指定し、iframeにもwidth:100%とheight:100%を設定しているため、モーダルの横幅に合わせながら16:9の比率で地図を表示できます。
また、画面幅640px以下では@media(max-width:640px)によってコンテンツ全体の余白をpadding:24px 18px;、モーダル本体の余白をpadding:18px;へ変更しています。これにより、スマートフォン・タブレット・PCで利用できます。
コメント