Googleマップをアコーディオンに表示する方法
Googleマップをアコーディオンに表示する方法を紹介します。このサンプルでは、Googleマップの埋め込み用iframeをアコーディオンの中へ配置し、「Googleマップを表示」をクリックすると地図が表示され、もう一度クリックすると閉じる仕組みを作成します。最初は地図を非表示にしておき、必要なときだけ開いて確認できる構成です。
店舗サイトや会社案内、施設紹介、イベントページなどで、アクセス情報としてGoogleマップを掲載したい場合に利用できます。地図を常に大きく表示するのではなくアコーディオン内へまとめられるため、住所や営業時間などほかの情報と組み合わせて掲載するときにも使いやすくなります。JavaScriptではボタンをクリックしたときにクラスを切り替えるシンプルな処理で開閉します。
HTMLではタイトル、説明文、開閉ボタンの文章、Googleマップの埋め込みURLを変更できます。CSSではアコーディオンの横幅、余白、背景色、枠線、角丸、地図の高さなどを調整できます。Googleマップは横幅100%で表示されるため画面幅に合わせて縮小でき、スマートフォン・タブレット・PCで利用しやすいレスポンシブ対応のサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
見出しをクリックすると、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-accordion_wrap">
<!-- タイトル -->
<div class="google-map-accordion_title">
Googleマップをアコーディオンに表示
</div>
<!-- 説明文 -->
<p class="google-map-accordion_text">
見出しをクリックすると、Googleマップを表示できます。
</p>
<!-- アコーディオン -->
<div class="google-map-accordion_item">
<!-- 開閉ボタン -->
<button
class="google-map-accordion_button"
type="button">
Googleマップを表示
</button>
<!-- 開閉する内容 -->
<div class="google-map-accordion_content">
<!-- Googleマップ -->
<iframe
class="google-map-accordion_map"
src="ここにGoogleマップの埋め込みURLを入力"
title="Googleマップ"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではアコーディオンとGoogleマップを表示するiframeを配置し、CSSではアコーディオン全体や地図の表示サイズを整えます。JavaScriptでは「Googleマップを表示」をクリックしたときにis-openクラスを切り替え、Googleマップを開閉します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはアコーディオンとGoogleマップを構成するファイルです。タイトル、説明文、開閉ボタンの文章を変更できます。表示するGoogleマップは、iframeのsrcに設定する埋め込みURLを変更することで、任意の場所へ変更できます。
style.cssはアコーディオン全体とGoogleマップのデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、ボタン、開閉記号、地図の高さなどを変更できます。
script.jsはアコーディオンを開閉するファイルです。開閉ボタンをクリックすると、アコーディオンの親要素へis-openクラスを追加または削除します。クラスの状態に応じてGoogleマップの表示と非表示が切り替わります。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開いてください。「Googleマップを表示」をクリックするとアコーディオンが開いて地図が表示され、もう一度クリックすると閉じます。
Googleマップの埋め込みURLを取得する方法
表示したい場所をGoogleマップで検索し、対象の場所を表示します。「共有」を選択したあと「地図を埋め込む」を選び、表示されたHTMLを確認してください。埋め込み用コードのiframeに設定されているsrcのURLを、このサンプルのindex.htmlにあるiframeのsrcへ設定します。
たとえば、Googleマップから取得した埋め込みコードが次のような場合です。
<iframe src="Googleマップの埋め込みURL"></iframe>
この中のsrc="Googleマップの埋め込みURL"に設定されているURLを使用します。通常のGoogleマップのページURLではなく、「地図を埋め込む」から取得したiframe用のURLを設定してください。
カスタマイズできる内容
index.htmlではタイトル、説明文、開閉ボタンの文章、表示するGoogleマップを変更できます。別の場所を表示するときは、iframeのsrcを対象となるGoogleマップの埋め込みURLへ変更してください。
style.cssではアコーディオン全体の横幅、余白、背景色、枠線、角丸、文字色、Googleマップの高さなどを変更できます。また、閉じている状態では「＋」、開いている状態では「－」を表示する設定も変更できます。
数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
アコーディオン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がります。
border-radius:18px;
アコーディオン全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。
margin-bottom:24px;
説明文の下側余白です。24pxを大きくするとアコーディオンとの間隔が広がり、小さくすると狭くなります。
border-radius:12px;
アコーディオンの角丸です。値を大きくすると丸みが強くなり、小さくすると角張った表示になります。
padding:16px 18px;
開閉ボタンの内側余白です。上下の16pxを大きくするとボタンが高くなり、左右の18pxを大きくすると文字と端の間隔が広がります。
height:300px;
Googleマップの表示高さです。値を大きくすると地図が縦に広くなり、小さくすると低く表示されます。
border-radius:10px;
Googleマップの角丸です。値を大きくすると地図の角の丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでアコーディオン全体の最大横幅をmax-width:700pxに設定し、Googleマップにはwidth:100%を指定しています。画面幅が狭くなると地図も利用できる横幅に合わせて縮小されるため、スマートフォン・タブレット・PCで利用できます。
コメント