Googleマップをモーダルウインドウで表示する方法
Googleマップをモーダルウインドウで表示する方法を紹介します。ボタンをクリックするとモーダルウインドウが開き、その中へGoogleマップを埋め込んで表示できるサンプルです。HTML・CSS・JavaScriptだけで実装できるため、外部ライブラリを導入せずに利用できます。
iframeを利用してGoogleマップを表示するため、店舗情報、会社案内、イベント会場、アクセスページなどで地図を見やすく表示したい場合に便利です。ページ遷移せずに現在のページ上で地図を確認できるため、ユーザーの操作性も向上します。
配布用コードではGoogleマップの埋め込みURLを変更するだけで、好きな場所の地図へ簡単に差し替えられます。また、モーダルのサイズ、背景色、余白、角丸なども自由にカスタマイズでき、スマートフォン・タブレット・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マップの表示領域を作成し、CSSでモーダルの配置や大きさ、背景オーバーレイ、地図の表示サイズを設定します。JavaScriptでは、ボタン操作と背景クリックによるモーダルの開閉を行います。
Googleマップはindex.html内のiframeを利用して表示します。表示したい地点は、Googleマップで住所・施設名・緯度経度を検索して取得した埋め込みURLへ変更できます。取得したiframe全体を貼り付けるのではなく、iframeのsrc属性に指定されているURLをサンプルコードへ設定します。
各ファイルを同じsampleフォルダへ配置すれば利用できます。Google Maps APIやAPIキーは使用しないため、Googleマップから埋め込みURLを取得し、index.htmlへ設定したあとにブラウザで開くだけで動作を確認できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
モーダルウインドウ、Googleマップの表示領域、開くボタン、閉じるボタンを記述します。Googleマップ用iframeのsrc属性を変更すると、表示する住所・施設・緯度経度を変更できます。iframeのtitle属性も、表示する地点が分かる内容へ変更できます。
style.css
モーダルウインドウの幅、背景色、余白、角丸、影、背景オーバーレイ、閉じるボタン、Googleマップの表示サイズなどを設定します。
script.js
モーダルウインドウを開くボタン、閉じるボタン、背景クリックによる開閉処理を記述します。
設置方法・使い方
① sampleフォルダを作成します。
② sampleフォルダ内へindex.html・style.css・script.jsを配置します。
③ Googleマップを開き、表示したい住所・施設名・緯度経度を検索します。
④ 検索結果から表示したい地点を選択し、「共有」をクリックします。
⑤ 「地図を埋め込む」を選択し、「HTMLをコピー」をクリックします。
⑥ コピーしたiframe内のsrc属性にある埋め込みURLを、index.htmlのGoogleマップ用iframeへ貼り付けます。
⑦ iframeのtitle属性を、表示する地点に合わせて変更します。
⑧ sample/index.htmlをブラウザで開きます。
⑨ 表示ボタンをクリックすると、指定した地点のGoogleマップがモーダルウインドウ内に表示されます。
⑩ 閉じるボタンまたはモーダル外側の背景をクリックすると、モーダルウインドウが閉じます。
カスタマイズできる内容
・index.htmlのGoogleマップ用iframeにあるsrc属性を変更すると、表示する地点を変更できます。住所や施設名だけでなく、「35.681236, 139.767125」のような緯度経度をGoogleマップで検索して、その地点の埋め込みURLを取得することもできます。
・index.htmlでは、モーダルのタイトル、説明文、開くボタン、閉じるボタンの文字を変更できます。
・index.htmlのiframeにあるtitle属性は、表示する地図の内容に合わせて変更できます。
・style.cssでは、モーダルの幅、背景色、文字色、余白、角丸、影、背景オーバーレイの暗さを変更できます。
・style.cssでは、Googleマップ表示領域の幅や縦横比を変更できます。
・script.jsでは、開くボタン、閉じるボタン、背景クリックによるモーダルの開閉処理を管理しています。
数値調整
・style.cssのモーダルに指定しているwidthやmax-widthを変更すると、モーダルウインドウの横幅が変わります。値を大きくすると広く、小さくすると狭くなります。
・style.cssの背景オーバーレイに指定しているrgbaの透明度を変更すると、モーダル表示中の背景の暗さが変わります。値を1へ近づけると暗くなり、0へ近づけると明るくなります。
・style.cssのGoogleマップ表示領域に指定しているaspect-ratioを変更すると、地図の縦横比が変わります。
・style.cssにtransitionが指定されている場合は、その秒数を変更するとモーダルの表示・非表示にかかる時間が変わります。値を大きくするとゆっくり、小さくすると速く動作します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでモーダルにwidth:100%とmax-widthを指定し、Googleマップ表示領域にwidth:100%とaspect-ratioを設定しているため、画面幅に合わせてモーダルと地図の大きさが調整されます。スマートフォン・タブレット・PCで利用できます。
コメント