Googleマップ付きカードを作る方法【HTML/CSS・サンプルコード付き】

タイトル・説明文・サイズ・配置・背景色・枠線・影・文字などを設定して、HTMLとCSSを自動生成できます。

Googleマップ付きカードを作る方法

Googleマップ付きカードを作る方法を紹介します。カードの中にGoogleマップ、タイトル、説明文をまとめて表示することで、店舗情報や会社案内、イベント会場などの位置情報を見やすく掲載できます。アクセス案内ページや店舗紹介ページなど、地図を分かりやすく表示したい場面で利用しやすいレイアウトです。

このサンプルでは、HTMLとCSSだけを使用して、Googleマップを埋め込んだシンプルなカードを作成します。カード上部にGoogleマップを配置し、その下にタイトルと説明文を表示する構成です。JavaScriptは使用していないため、静的なWebページにもそのまま導入できます。

Googleマップの表示場所はiframeのURLを変更するだけで簡単に差し替えられます。カードの幅や余白、背景色、角丸、文字サイズなどもCSSから自由に変更できるため、店舗紹介やアクセスページなどさまざまな用途に応用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

店舗へのアクセス

カード内に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-card_wrap">

    <!-- Googleマップ付きカード -->
    <article class="google-map-card_card">

      <!-- Googleマップ表示エリア -->
      <div class="google-map-card_map">

        <!--
          表示する地図は下記 iframe の src を変更

          地名で指定する場合
          https://www.google.com/maps?q=東京駅&output=embed

          緯度・経度で指定する場合
          https://www.google.com/maps?q=35.681236,139.767125&output=embed
        -->
        <iframe
          src="https://www.google.com/maps?q=東京駅&output=embed"
          title="Googleマップ"
          loading="lazy"
          referrerpolicy="no-referrer-when-downgrade">
        </iframe>

      </div>

      <!-- カード本文 -->
      <div class="google-map-card_body">

        <!-- タイトル -->
        <h3>店舗へのアクセス</h3>

        <!-- 説明文 -->
        <p>
          カード内にGoogleマップを埋め込み、タイトルと説明文をまとめて表示するサンプルです。
        </p>

      </div>

    </article>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  font-family:sans-serif;  /* 使用するフォント */
  background:#f8fafc;  /* ページ背景色 */
}

/* カード表示エリア */
.google-map-card_wrap{
  display:flex;  /* カードを配置 */
  justify-content:center;  /* カードを中央寄せ */
  padding:40px 20px;  /* 外側の余白 */
}

/* カード本体 */
.google-map-card_card{
  width:380px;  /* カード横幅 */
  overflow:hidden;  /* 地図を角丸内に収める */
  border:1px solid #e5e7eb;  /* 枠線 */
  border-radius:12px;  /* カードの角丸 */
  background:#ffffff;  /* カード背景色 */
}

/* Googleマップ表示エリア */
.google-map-card_map{
  width:100%;  /* 横幅いっぱい */
  height:260px;  /* 地図の高さ */
}

/* Googleマップ */
.google-map-card_map iframe{
  display:block;  /* 余計な隙間をなくす */
  width:100%;  /* 横幅いっぱい */
  height:100%;  /* 高さいっぱい */
  border:none;  /* iframeの枠線を消す */
}

/* カード本文 */
.google-map-card_body{
  padding:20px;  /* 内側余白 */
}

/* タイトル */
.google-map-card_body h3{
  margin:0 0 10px;  /* タイトル下の余白 */
  font-size:20px;  /* タイトル文字サイズ */
  color:#111827;  /* タイトル文字色 */
}

/* 説明文 */
.google-map-card_body p{
  margin:0;  /* 説明文の余白 */
  color:#4b5563;  /* 説明文の文字色 */
  line-height:1.8;  /* 行間 */
}

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

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではGoogleマップを表示するiframeと、店舗名や説明文をまとめたカードを作成します。CSSではカードの横幅、余白、背景色、枠線、角丸、Googleマップの高さ、タイトルや説明文のデザインを設定します。JavaScriptは使用しません。

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

各ファイルの役割
index.htmlはGoogleマップ付きカードを構成するファイルです。iframeで表示する地図、カードのタイトル、説明文を変更できます。Googleマップはiframeのsrcへ表示したい場所を指定します。

style.cssはカード全体とGoogleマップの表示デザインを設定するファイルです。カードの横幅、外側余白、枠線、角丸、背景色、地図の高さ、本文の余白、タイトルの文字サイズや説明文の行間などを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開いてください。カード上部にGoogleマップが表示され、その下に「店舗へのアクセス」のタイトルと説明文が表示されます。

Googleマップへ表示する場所の変更方法
表示する場所は、index.htmlにあるiframeのsrcを変更します。このサンプルでは次のように東京駅を指定しています。

https://www.google.com/maps?q=東京駅&output=embed

q=より後ろの「東京駅」を変更すると、別の場所を表示できます。たとえば大阪駅を表示する場合は次のように変更します。

https://www.google.com/maps?q=大阪駅&output=embed

緯度と経度を指定することもできます。たとえば緯度35.681236、経度139.767125を指定する場合は、次のように設定します。

https://www.google.com/maps?q=35.681236,139.767125&output=embed

URLを変更してindex.htmlを保存したあと、ブラウザで再読み込みすると指定した場所のGoogleマップが表示されます。

カスタマイズできる内容
index.htmlではGoogleマップへ表示する場所、「店舗へのアクセス」のタイトル、カード下部の説明文を変更できます。店舗名、施設名、住所案内など、用途に合わせた文章へ変更できます。

style.cssではカードの横幅、外側余白、背景色、枠線、角丸、Googleマップの高さ、カード本文の余白、タイトルの文字サイズや色、説明文の文字色や行間を変更できます。

数値調整
style.css
padding:40px 20px;
カード表示エリアの内側余白です。上下の40pxを大きくするとカードと画面上下の間隔が広がり、左右の20pxを大きくすると画面端との間隔が広がります。

width:380px;
カード本体の横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。

border:1px solid #e5e7eb;
カード本体の枠線です。1pxを大きくすると枠線が太くなります。

border-radius:12px;
カード本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

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

padding:20px;
カード本文の内側余白です。値を大きくするとタイトルや説明文とカード端との間隔が広がります。

margin:0 0 10px;
タイトル下側の余白です。10pxを大きくするとタイトルと説明文の間隔が広がり、小さくすると狭くなります。

font-size:20px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。

レスポンシブ対応
Googleマップにはwidth:100%を指定しているため、カードの横幅に合わせて地図が表示されます。ただし、このサンプルではカード本体にwidth:380pxを指定しており、画面幅に応じてカード自体を縮小するためのメディアクエリやmax-widthは設定していません。