ShopifyにGoogleマップを埋め込む方法を徹底解説｜おすすめアプリも紹介

はじめに
記事の構成
Shopify で Google マップを表示できる？
Google マップを埋め込むメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル Google Maps 表示｜お手軽マップ埋め込み」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
- 方法1: アプリ管理画面から1クリックで追加（推奨）
- 方法2: 手動でテーマに追加（任意ページに設置したい場合）
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify でオンラインストアを運営していて、「実店舗の場所を地図で表示したい」「お客様に来店してもらいやすくしたい」と思ったことはありませんか？

実店舗やショールーム、ピックアップポイントを持つストアオーナーにとって、Shopify に Google マップを埋め込むことは、お客様への情報提供と来店促進に直結する重要な施策です。地図を表示することで、お客様はわざわざ別のアプリを開いて場所を調べる手間がなくなり、スムーズに来店できるようになります。

しかし、Shopify の標準機能だけでは Google マップを美しくカスタマイズして表示するのが難しいケースがあります。テーマのコードを編集して実装する方法もありますが、専門的な知識が必要になり、テーマアップデート時のメンテナンスも発生します。

この記事では、Shopify に Google マップを埋め込む方法を、メリット・デメリットの比較から、テーマコード編集とアプリ導入の比較、おすすめアプリの詳細な使い方まで徹底的に解説します。

この記事は以下の記事を参考にしています。

記事の構成

この記事は以下の流れで解説します。

Shopify で Google マップを表示できるか？
Google マップを埋め込むメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプル Google Maps 表示｜お手軽マップ埋め込み」の紹介
アプリのインストール手順
アプリをテーマに追加する方法
アプリの設定項目の詳細解説
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問

Shopify で Google マップを表示できる？

結論から言うと、Shopify で Google マップを表示することは可能です。

実現方法としては、大きく分けて以下の 2 つがあります。

テーマのコード編集で実装する方法: Liquid テンプレートに Google Maps の iframe コードを直接記述する
アプリを導入して実装する方法: 専用のアプリをインストールし、ノーコードで地図を設定・表示する

一部の Shopify テーマには標準で地図セクションが用意されていますが、Google Maps API キーの設定が必要だったり、デザインカスタマイズの自由度が低かったりするケースが多いです。そのため、本格的に Google マップを活用したい場合は、コード編集またはアプリ導入のいずれかの方法を選ぶことになります。

Google マップを埋め込むメリット・デメリット

メリット

来店促進効果が期待できる

ストア上に地図を表示することで、お客様が実店舗の場所を直感的に把握できます。「こんなに近くにお店があるんだ」「駅からすぐだから寄ってみよう」という行動を促進し、実店舗への来客数アップにつながります。特にスマートフォンからのアクセスでは、地図から直接ナビゲーションを開始できるため、来店のハードルが大幅に下がります。

EC で商品を見て、実店舗で実物を確認してから購入するお客様を取り込める
「Web で見たけど、近くにお店があったので行ってみた」という行動パターンを生み出せる

ブランドの信頼性が向上する

実在する店舗の場所を地図で明示することで、「実態のあるビジネスである」という安心感をお客様に与えられます。特に初めてストアを訪れたお客様にとって、物理的な店舗が存在することは大きな信頼材料になります。

新規顧客の購入決定を後押しする
「このストアは大丈夫だろうか」という不安を払拭できる

ユーザー体験が向上する

お客様がわざわざ Google Maps アプリに切り替えて店舗名を検索する手間がなくなります。ストア上で直接地図を操作し、拡大・縮小やルート確認ができるため、シームレスな体験を提供できます。

ページ遷移なしで地図を確認できる
住所のコピー＆ペーストが不要になる

ローカル SEO に貢献する

店舗情報とともに地図を掲載することで、地域名を含む検索キーワード（「○○市 △△ショップ」など）での上位表示が期待できます。Google が提供するコンテンツを適切に埋め込むことで、ページの情報量も充実し、検索エンジンからの評価向上につながります。

問い合わせの削減につながる

「お店はどこにありますか？」「駐車場はありますか？」「最寄り駅はどこですか？」といった位置情報に関する問い合わせを大幅に減らせます。地図と合わせて住所・営業時間・アクセス方法を掲載することで、お客様自身で情報を得られるようになります。

デメリット

ページの読み込み速度にわずかな影響がある

Google Maps の埋め込みは外部リソース（iframe）を読み込むため、ページの表示速度にわずかに影響を与える可能性があります。ただし、loading="lazy" 属性を設定することで影響を最小限に抑えられます。多くのアプリではこの対策が標準で実装されています。

デザインの統一感を損なう場合がある

デフォルトの Google Maps はカラフルな配色（道路はグレー、公園は緑、水域は青など）であるため、モノトーンやミニマルなデザインのストアでは統一感を損なう可能性があります。グレースケールやセピアなどのフィルター機能を持つアプリを使えば、この問題は解消できます。

API キーの管理が必要になるケースがある

一部の実装方法や古いアプリでは、Google Maps Platform の API キーが必要です。API キーの取得には Google Cloud のアカウント設定や請求設定が必要になります。ただし、最近のアプリの多くは API キー不要で動作するため、この点を確認してアプリを選べば問題ありません。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット

月額費用がかからない
完全に自由なカスタマイズが可能
外部アプリへの依存がない

デメリット

HTML/CSS/JavaScript の知識が必要
テーマアップデート時にコードが上書きされるリスクがある
レスポンシブ対応やフィルター効果を自前で実装する必要がある
不具合が発生した場合のサポートがない
設定変更のたびにコードを編集する必要がある

アプリを導入する方法

メリット

コーディング知識が不要
テーマエディタから直感的に設定変更が可能
テーマアップデートの影響を受けにくい
アプリ開発者によるサポートが受けられる
レスポンシブ対応やフィルター効果が標準装備

デメリット

月額費用が発生する
アプリの提供終了リスクがある
カスタマイズの自由度がアプリの機能に限定される

結論：最初はアプリで小さく試すのがおすすめ

コストと手間のバランスを考えると、まずはアプリで導入し、効果を確認するのがおすすめです。多くのアプリは無料体験期間を設けているため、実際の表示を確認してから継続を判断できます。地図の表示が売上や来店にどの程度貢献するかを検証してから、必要に応じてコード実装に切り替えることも可能です。

月額 $9.99 程度の投資で、ノーコードでの設定・レスポンシブ対応・フィルター効果・サポートが得られることを考えると、多くのストアにとってアプリ導入のコストパフォーマンスは高いと言えます。

アプリのインストール手順

1. Shopify 管理画面の左下にある「設定」をクリック

Shopify 管理画面の左下にある「設定」ボタンの位置を示したスクリーンショット

Shopify 管理画面にログインし、画面左下に表示されている「設定」をクリックします。

2. 「アプリ」をクリックし、「Shopify App Store」へ移動

設定画面の「アプリ」メニューと「Shopify App Store」リンクを示したスクリーンショット

設定画面の左メニューから「アプリ」をクリックし、画面上部の「Shopify App Store」ボタンをクリックして App Store に移動します。

3. 検索窓にアプリ名を入力

Shopify App Store の検索窓にアプリ名を入力した状態のスクリーンショット

App Store の検索窓に「シンプル Google Maps 表示」と入力し、検索結果に表示されたアプリをクリックします。

4. アプリ詳細画面で「インストール」をクリック

アプリ詳細画面の「インストール」ボタンを示したスクリーンショット

アプリの詳細画面が表示されたら、「インストール」ボタンをクリックします。

5. 権限を確認してインストール完了

権限確認画面と「インストール」ボタンを示したスクリーンショット

権限の確認画面が表示されるので、内容を確認して「インストール」をクリックすればインストール完了です。

アプリをテーマに追加（有効化）

インストールが完了したら、テーマに地図ブロックを追加します。2つの方法があります。

方法1: アプリ管理画面から1クリックで追加（推奨）

アプリの管理画面

アプリの管理画面を開きます。

テーマ選択プルダウンと「テーマに追加」ボタン

テーマのプルダウンから追加先のテーマを選択し、「テーマに追加」ボタンをクリックします。

テーマエディタで地図ブロックが追加された状態のスクリーンショット

テーマエディタが自動で開き、地図ブロックが追加された状態になります。表示位置や設定を確認して「保存する」をクリックすれば完了です。

方法2: 手動でテーマに追加（任意ページに設置したい場合）

トップページ以外のページ（会社概要ページ、お問い合わせページなど）に地図を追加したい場合は、手動でテーマに追加します。

Shopify 管理画面の「オンラインストア」→「テーマ」→「カスタマイズ」の操作

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。

テーマエディタ上部のページ選択プルダウン

テーマエディタ上部のプルダウンから、地図を追加したいページを選択します。

「セクションを追加」ボタン

「セクションを追加」または「ブロックを追加」をクリックします。

「アプリ」タブからアプリブロックを選択する画面

「アプリ」タブから「シンプル Google Maps 表示｜お手軽マップ埋め込み」のブロックを選択して追加し、「保存する」をクリックして完了です。

アプリの設定項目を理解する

テーマエディタから、Google Maps ブロックの各設定をカスタマイズできます。

Google Maps 埋め込みコード

Google Maps の「共有」→「地図を埋め込む」から取得したコードを貼り付ける設定です。この設定が地図表示の基本となります。

Google Maps 埋め込みコードの設定画面

Google Maps で表示したい場所を開き、「共有」ボタンから「地図を埋め込む」を選んでコードを取得してください。市街地マップ・航空写真のどちらがデフォルトで表示されるかは、コードを取得したときに選択していた表示タイプによって決まります。

コンテンツ設定（タイトル・説明文）

コンテンツ設定の設定画面

タイトルと説明文を設定できます。どちらかを入力すると、地図とテキストが並ぶ2カラムレイアウトに自動で切り替わります。両方とも未設定の場合は、地図だけの1カラム表示になります。

タイトル: 店舗名やアクセス情報の見出しに使用
説明文: 住所、営業時間、アクセス方法などを記載（リッチテキスト対応）

レイアウト設定

レイアウト設定の設定画面

PC とスマホそれぞれで、地図の位置やサイズを個別にカスタマイズできます。

地図の位置（PC）: 左 / 右
地図の位置（スマホ）: コンテンツの上 / コンテンツの下
コンテンツの上下位置（PC）: 上揃え / 中央揃え / 下揃え
地図の高さ（PC）: 200〜800px（初期値: 400px）
地図の高さ（スマホ）: 100〜800px（初期値: 300px）
地図の幅（PC・1カラム）: 0〜1000px（0 = セクション幅いっぱい）
地図の幅（PC・2カラム）: 10〜90%（初期値: 50%）
地図の幅（スマホ）: 0〜1000px（0 = セクション幅いっぱい）

スタイル設定（フィルター・テキスト・背景色）

マップのフィルター

マップのフィルター設定画面

マップの UI を非表示: ズームボタン等を非表示
グレースケール: 0〜100%（モノクロに変換）
セピア: 0〜100%（レトロな印象に）
階調反転: 0〜100%（ダークモード風に）
色相変更: 0〜360度（ブランドカラーに調整）

タイトルのスタイル

タイトルのスタイル設定画面

文字揃え、文字サイズ（PC/スマホ別）、文字の太さ、文字の色を設定できます。

説明文のスタイル

説明文のスタイル設定画面

文字サイズ（PC/スマホ別）、文字揃え、文字の色を設定できます。

ブロックの背景色

ブロックの背景色設定画面

ブロック全体の背景色を指定できます。地図ブロックを目立たせたい場合やセクションを区切りたい場合に便利です。

余白設定

余白設定の設定画面

ブロック全体の余白やコンテンツ間のスペースを、PC/スマホ別に細かく調整できます。ブロック上下の外側余白、ブロック左右・上下の内側余白、コンテンツ内側余白、マップとコンテンツ間の余白、タイトルと説明文間の余白が設定可能です。

すぐ使えるおすすめ設定例

シンプルな地図表示（1カラム）

店舗の場所だけを大きく表示したい場合のおすすめ設定です。

タイトル・説明文: 未設定（1カラム表示）
地図の高さ（PC）: 400px
地図の高さ（スマホ）: 300px
地図の幅（PC・1カラム）: 800px（中央に適度なサイズで表示）
グレースケール: 0%（デフォルトのカラー表示）
ブロック上下の余白: 80px

アクセスページ向け（2カラム）

住所や営業時間と地図を並べて表示するおすすめ設定です。

タイトル: 「アクセス」や「店舗情報」
説明文: 住所、営業時間、定休日、電話番号、最寄り駅からの行き方
地図の位置（PC）: 左
地図の位置（スマホ）: コンテンツの上
地図の幅（PC・2カラム）: 50%
コンテンツの上下位置: 中央揃え

モノトーンデザイン向け

ストアのデザインがモノトーンの場合のおすすめ設定です。

グレースケール: 100%（完全なモノクロ）
マップの UI を非表示: チェック
ブロックの背景色: #f5f5f5（薄いグレー）
タイトルの文字の色: #333333
説明文の文字の色: #666666

ダークテーマ向け

ダークモードのストアに合わせるおすすめ設定です。

階調反転: 90%
色相変更: 180度
ブロックの背景色: #1a1a1a
タイトルの文字の色: #ffffff
説明文の文字の色: #cccccc

テーマのコード編集で実装する場合のサンプルコード

アプリを使わずに、テーマのコードを直接編集して Google マップを埋め込む方法も紹介します。

実装の流れ

Google Maps で埋め込みコードを取得する
Liquid テンプレートに HTML を追加する
CSS でスタイリングする
必要に応じて JavaScript でインタラクションを追加する

HTML を追加

テーマの Liquid テンプレート（例: sections/google-map.liquid）に以下のコードを追加します。

<section class="custom-google-map-section">
  <div class="custom-google-map-container">
    <div class="custom-google-map-iframe-wrapper">
      <iframe
        src="https://www.google.com/maps/embed?pb=YOUR_EMBED_PARAMS_HERE"
        width="100%"
        height="400"
        style="border:0;"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
        title="店舗の場所">
      </iframe>
    </div>
    <div class="custom-google-map-content">
      <h2 class="custom-google-map-title">店舗名</h2>
      <div class="custom-google-map-description">
        <p>〒000-0000 東京都○○区○○ 1-2-3</p>
        <p>TEL: 03-0000-0000</p>
        <p>営業時間: 10:00 - 20:00</p>
        <p>定休日: 水曜日</p>
        <p>最寄り駅: ○○線 △△駅 徒歩5分</p>
      </div>
    </div>
  </div>
</section>

CSS を追加

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

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

.custom-google-map-iframe-wrapper {
  flex: 1;
  min-width: 0;
}

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

.custom-google-map-content {
  flex: 1;
  padding: 24px;
}

.custom-google-map-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.custom-google-map-description {
  font-size: 15px;
  line-height: 2;
  color: #555;
}

.custom-google-map-description p {
  margin-bottom: 4px;
}

/* グレースケールフィルター（任意） */
.custom-google-map-iframe-wrapper iframe {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.custom-google-map-iframe-wrapper iframe:hover {
  filter: grayscale(0%);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .custom-google-map-container {
    flex-direction: column;
    gap: 24px;
  }

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

  .custom-google-map-content {
    padding: 0;
  }

  .custom-google-map-title {
    font-size: 20px;
  }
}

JavaScript を追加

地図のフィルターをホバー時に解除するインタラクションを追加する例です。

document.addEventListener('DOMContentLoaded', function() {
  const mapWrapper = document.querySelector('.custom-google-map-iframe-wrapper');
  if (!mapWrapper) return;

  const iframe = mapWrapper.querySelector('iframe');
  if (!iframe) return;

  // ホバー時にグレースケールを解除
  mapWrapper.addEventListener('mouseenter', function() {
    iframe.style.filter = 'grayscale(0%)';
  });

  mapWrapper.addEventListener('mouseleave', function() {
    iframe.style.filter = 'grayscale(100%)';
  });
});