2026/05/15

Shopify に Google Maps を埋め込めるアプリ6選を紹介！

@ 信条刃

今回の記事は Shopify App Store で提供されている、Google Maps 埋め込みアプリについての記事です。実店舗やショールームを持つストアオーナーにとって、オンラインストアに地図を表示することはお客様の来店を促進するうえで非常に重要な施策です。この記事では、Shopify ストアに Google マップを簡単に埋め込めるおすすめアプリを 6 つご紹介します。

Google マップの埋め込みとは

Google マップの埋め込みとは、Google Maps が提供するインタラクティブな地図を Web サイト上に表示する仕組みのことです。Google Maps の「共有」メニューから取得できる埋め込みコード（iframe）を使って、ページ上に地図を配置できます。

埋め込まれた地図はユーザーが直接操作でき、ズームイン・ズームアウトやドラッグによる移動、ストリートビューの表示などが可能です。実店舗の所在地を視覚的に伝えたい場合や、複数の取扱店舗を一覧で表示したい場合に活用されます。

Shopify ストアにおいても、Google マップの埋め込みはお客様に店舗のアクセス情報を提供するための有効な手段です。しかし、Shopify のデフォルト機能だけでは、地図のデザインカスタマイズやレスポンシブ対応が十分にできないケースがあります。そこで、専用のアプリを活用することで、ノーコードで美しい地図表示を実現できます。

Shopify Googleマップ埋め込みアプリについて調べるにあたり、以下の記事を参考にしています。

Google マップを Shopify ストアに埋め込む利点

来店率の向上
お客様がストア上で直接店舗の場所を確認できるため、「近くにあるなら行ってみよう」という行動につながりやすくなります。特にスマートフォンからのアクセスでは、地図アプリとの連携でそのままナビゲーションを開始できるため、来店のハードルが下がります。
ブランドの信頼性向上
実在する店舗の場所を地図で明示することで、オンラインストアに対する信頼感が高まります。初めて訪れたお客様にとって、実体のあるビジネスであることの証明になります。
お客様の利便性向上
わざわざ Google Maps を別タブで開いて検索する手間が省けます。ストア上で地図を確認し、ルートや所要時間まで把握できるため、お客様にとってスムーズな体験を提供できます。
問い合わせ件数の削減
「お店の場所はどこですか？」「最寄り駅からの行き方を教えてください」といった問い合わせが減ります。地図に加えて住所や営業時間を併記することで、お客様の疑問を事前に解消できます。
ローカル SEO への貢献
店舗情報と地図を適切に掲載することで、地域名を含む検索キーワードでの上位表示が期待できます。Google のローカル検索アルゴリズムにおいて、正確な住所情報の掲載はプラスに働きます。
O2O 施策の基盤構築
オンラインストアから実店舗への送客を実現する O2O（Online to Offline）施策の基盤として機能します。地図表示と合わせて店舗限定クーポンなどを表示すれば、さらなる来店促進が可能です。

Google マップ埋め込みアプリの選び方

Shopify で Google マップを埋め込むアプリを選ぶ際は、以下のポイントを参考にしてください。

日本語に対応しているか（管理画面・フロントエンドの両方）
ノーコードで設定できるか
1ロケーション表示か、複数ロケーション対応か
デザインカスタマイズの自由度（フィルター、カラー、レイアウトなど）
レスポンシブ対応（PC・スマホ別の設定が可能か）
API キーが不要か
料金プランが予算に合っているか

単一の店舗の地図を表示したい場合と、複数の店舗をマップ上にプロットしたい場合では、適切なアプリが異なります。自分のストアの要件に合ったアプリを選びましょう。

コーディングで Google Maps を埋め込む方法

アプリを使わずに、テーマのコードを直接編集して Google Maps を埋め込むことも可能です。以下はシンプルな実装例です。

HTML（Liquid テンプレートに追加）

<div class="google-map-section">
  <div class="google-map-container">
    <div class="google-map-wrapper">
      <iframe
        src="https://www.google.com/maps/embed?pb=YOUR_EMBED_PARAMS"
        width="100%"
        height="400"
        style="border:0;"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
      </iframe>
    </div>
    <div class="google-map-info">
      <h2 class="google-map-title">店舗名</h2>
      <p class="google-map-description">
        〒000-0000 東京都○○区○○ 1-2-3<br>
        営業時間: 10:00 - 20:00<br>
        定休日: 水曜日
      </p>
    </div>
  </div>
</div>

CSS

.google-map-section {
  padding: 80px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.google-map-container {
  display: flex;
  gap: 32px;
  align-items: center;
}

.google-map-wrapper {
  flex: 1;
}

.google-map-wrapper iframe {
  width: 100%;
  height: 400px;
  border-radius: 8px;
}

.google-map-info {
  flex: 1;
  padding: 32px;
}

.google-map-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}

.google-map-description {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .google-map-container {
    flex-direction: column;
  }

  .google-map-wrapper iframe {
    height: 300px;
  }

  .google-map-info {
    padding: 16px 0;
  }
}

実装上の注意点

Google Maps の埋め込みコードは Google Maps の「共有」→「地図を埋め込む」から取得してください
loading="lazy" を指定することで、地図がビューポートに入るまで読み込みを遅延させ、ページの初期表示速度を改善できます
レスポンシブ対応のために、iframe の width は 100% に設定し、高さはメディアクエリで調整してください
テーマのアップデート時にカスタムコードが上書きされるリスクがあるため、子テーマの使用やバックアップの取得をおすすめします

コードの管理やアップデート対応が手間に感じる場合は、アプリの利用がおすすめです。特に「シンプル Google Maps 表示｜お手軽マップ埋め込み」であれば、上記のコード実装と同等以上のことをノーコードで実現できます。

使いやすさ

今回紹介した 6 つのアプリの中で最もおすすめなのは、「シンプル Google Maps 表示｜お手軽マップ埋め込み」 です。

日本語に対応しており、Google Maps の埋め込みコードを貼り付けるだけで地図を表示できる手軽さが最大の魅力です。2カラムレイアウトやフィルター効果、PC/スマホ別のカスタマイズなど、デザインの自由度も高く、コーディング不要でストアのデザインにマッチした地図表示を実現できます。実店舗を1つ持つストアオーナーから、アクセスページに地図を追加したいストアまで、幅広い用途に対応できます。

終わりに

Shopify ストアに Google マップを埋め込むことで、実店舗への来店促進やブランドの信頼性向上など、多くのメリットが得られます。今回紹介したアプリはそれぞれ特徴が異なりますので、ストアの要件や予算に合わせて最適なアプリを選んでみてください。

単一店舗の地図をシンプルに美しく表示したい場合は「シンプル Google Maps 表示｜お手軽マップ埋め込み」、複数店舗のロケーターが必要な場合は「GA: Google Maps+Store Locator」や「CBmap Store Locator & Stockist」が適しています。

参考記事

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopify に Google Maps を埋め込めるアプリ6選を紹介！

Google マップの埋め込みとは

Google マップを Shopify ストアに埋め込む利点

Google マップ埋め込みアプリの選び方

おすすめの Google マップ埋め込み Shopify アプリ

シンプル Google Maps 表示｜お手軽マップ埋め込み ☆ 迷ったらこれ

特徴・機能

価格設定

Google Maps ‑ Store Locator

特徴・機能

価格設定

GA: Google Maps+Store Locator

特徴・機能

価格設定

IzyMaps: Google Maps Locator

特徴・機能

価格設定

CBmap Store Locator & Stockist

特徴・機能

価格設定

Webkul Store Locator

特徴・機能

価格設定

コーディングで Google Maps を埋め込む方法

HTML（Liquid テンプレートに追加）

CSS

実装上の注意点

使いやすさ

終わりに

参考記事

最新の記事

目次

関連タグ

Shopify に Google Maps を埋め込めるアプリ6選を紹介！

Shopify の購入後サンクスページにクーポンを表示できるアプリ7選を紹介

Shopify にお問い合わせフォームを設置できるアプリ12選を紹介！

Shopify のサンクスページにクロスセル商品を表示できるアプリ6選を紹介！

Shopify にサイズ表やテーブルを設置できるアプリ6選を紹介！

Shopify にタブ切り替えを設置できるアプリ6選を紹介！