Googleマップをテーブルに表示する方法
Googleマップをテーブルに表示する方法を紹介します。このサンプルでは、HTMLのtable要素で作成した表のセル内にGoogleマップのiframeを配置し、店舗名や説明と地図を横並びで確認できるテーブルを作成します。Googleマップから取得した埋め込みURLをiframeのsrc属性へ設定するため、Google Maps JavaScript APIを使用せずに地図を表示できます。
店舗一覧、会社の営業所一覧、施設案内、観光スポットの紹介など、場所の情報と地図を同じ表で見せたい場合に利用できます。「項目」「説明」「地図」の3列に分けることで、施設名や店舗名、補足情報、実際の場所をひとまとまりで確認できます。地図を別ページで開かなくても位置を確認できるため、複数の情報を整理して掲載したいページにも適しています。
HTMLでは項目名や説明文、Googleマップの埋め込みURLを変更でき、CSSではテーブルの横幅、セルの余白、枠線、ヘッダーの色、iframeの高さなどを調整できます。テーブルは画面幅が狭い場合に横スクロールできる構成とし、iframe自体もセル幅に合わせて表示されるため、スマートフォン・タブレット・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>
<!-- Googleマップテーブル全体 -->
<div class="google-map-table_wrap">
<!-- テーブル -->
<table class="google-map-table_table">
<!-- テーブル見出し -->
<thead>
<tr>
<th>項目</th>
<th>説明</th>
<th>地図</th>
</tr>
</thead>
<!-- テーブル本文 -->
<tbody>
<tr>
<!-- 項目 -->
<td class="google-map-table_name">
東京駅
</td>
<!-- 説明 -->
<td class="google-map-table_description">
Googleマップをテーブルのセル内に表示したサンプルです。
</td>
<!-- Googleマップ表示セル -->
<td class="google-map-table_map">
<!--
【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-table_iframe"
src="YOUR_GOOGLE_MAP_EMBED_URL"
loading="lazy"
title="Googleマップ">
</iframe>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではtable要素で「項目」「説明」「地図」の3列を作成し、地図のセル内にiframeを配置してGoogleマップを表示します。CSSではテーブルの横幅、セルの余白、見出しの色、各列の横幅、Googleマップの表示サイズなどを設定します。
Googleマップの表示にはGoogle Maps JavaScript APIではなく、Googleマップから取得できる埋め込み用のiframe URLを使用します。そのためAPIキーやMap IDは必要ありません。利用者自身で表示したい場所の埋め込みURLを取得し、index.htmlのYOUR_GOOGLE_MAP_EMBED_URLへ設定して使用します。
テーブルは画面幅が狭くなった場合に横スクロールできる構成です。地図のiframeにはwidth:100%を指定しているため、地図列の横幅に合わせて表示されます。店舗一覧、施設案内、営業所一覧など、名称や説明とGoogleマップを同じテーブル内へまとめて表示したい場合に利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはテーブルとGoogleマップを構成するファイルです。「項目」「説明」「地図」の見出し、項目名、説明文を変更できます。Googleマップはiframeで表示しており、src="YOUR_GOOGLE_MAP_EMBED_URL"の部分へ利用者自身で取得したGoogleマップの埋め込みURLを設定します。
style.cssはテーブルとGoogleマップの表示を設定するファイルです。テーブル全体の最大横幅、各セルの余白や枠線、見出しの背景色、各列の横幅、Googleマップの高さなどを変更できます。また、画面幅が狭い場合にテーブルを横スクロールできるよう設定しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。次に、Googleマップでテーブルへ表示したい場所を検索してください。「共有」を選択し、「地図を埋め込む」を開いて「HTMLをコピー」からiframeコードを取得します。
コピーしたiframeコードにはsrc="..."が含まれています。このsrc属性の中に設定されている埋め込みURLだけを使用します。index.htmlにあるYOUR_GOOGLE_MAP_EMBED_URLを取得したURLへ置き換えてください。iframeタグ全体を置き換えるのではなく、src属性へ設定するURLを置き換えます。
設定後にsample/index.htmlをブラウザで開くと、「地図」のセル内に指定したGoogleマップが表示されます。この実装ではGoogle Maps JavaScript APIを使用していないため、APIキーやMap IDを取得・設定する必要はありません。
カスタマイズできる内容
index.htmlでは「東京駅」の項目名、「Googleマップをテーブルのセル内に表示したサンプルです。」の説明文、iframeのtitleを用途に合わせて変更できます。また、YOUR_GOOGLE_MAP_EMBED_URLを別の場所の埋め込みURLへ変更すると、テーブル内に表示するGoogleマップを変更できます。
style.cssではテーブル全体の最大横幅、テーブルの最小横幅、セルの余白や枠線、見出しの背景色と文字色、項目・説明・地図の各列幅、Googleマップの高さを変更できます。
数値調整
style.css
max-width:1000px;
テーブル全体の最大横幅です。値を大きくするとテーブルを広く表示でき、小さくするとコンパクトになります。
margin:40px auto;
テーブル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
min-width:760px;
テーブルの最小横幅です。表示領域が760pxより狭くなった場合でもテーブルの横幅を維持し、外側の要素で横スクロールできるようにします。
padding:20px;
各セルの内側余白です。値を大きくすると文字や地図とセルの枠線との間隔が広がり、小さくすると狭くなります。
border:1px solid #d1d5db;
各セルの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
font-size:18px;
テーブル見出しの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
width:20%;
項目列の横幅です。値を変更するとテーブル内で項目列が占める割合が変わります。
font-size:17px;
項目名の文字サイズです。値を大きくすると項目名が大きく表示されます。
width:30%;
説明列の横幅です。値を変更すると説明文を表示する列の割合が変わります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
width:50%;
地図列の横幅です。値を変更するとGoogleマップを表示する列の割合が変わります。
height:300px;
Googleマップの表示高さです。値を大きくすると地図の表示領域が高くなり、小さくすると低くなります。
@media (max-width:640px)
画面幅640px以下で適用する設定です。ブレークポイントを変更すると、スマートフォン向けの余白設定が適用される画面幅を変更できます。
padding:24px 18px;
画面幅640px以下で使用するページ全体の余白です。24pxが上下、18pxが左右の余白を表します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:1000pxによってテーブル全体の表示領域を調整し、overflow-x:autoとmin-width:760pxによって画面幅が狭い場合はテーブルを横スクロールできるようにしています。
Googleマップにはwidth:100%を指定しているため、iframeは地図セルの横幅に合わせて表示されます。また、640px以下ではページ全体の余白を24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント