Shopify で Google Maps を簡単に埋め込めるアプリを徹底解説｜ご利用ガイド
はじめに
Shopify は、誰でも簡単にオンラインストアを作れるプラットフォームです。Shopify アプリを使うことで、ストアにさまざまな機能を追加できます。
「シンプル Google Maps 表示｜お手軽マップ埋め込み」は、Google Maps の埋め込みコードを貼り付けるだけで、ストアのどのページにも地図を表示できる Shopify アプリです。テーマエディタから直感的に設定でき、コーディングの知識は不要です。タイトルと説明文を入力すると、地図と並ぶ2カラムレイアウトに自動で切り替わり、実店舗への集客に役立てたいストアオーナーにおすすめのアプリです。
料金
- Basic Plan: $9.99/月
- 7日間の無料体験
- 年払いで実質2ヶ月分無料でお得にご利用いただけます
アプリストア
シンプル Google Maps 表示｜お手軽マップ埋め込み - Shopify App Store
「シンプル Google Maps 表示｜お手軽マップ埋め込み」でできること
「シンプル Google Maps 表示｜お手軽マップ埋め込み」を使えば、Google Maps の埋め込みコードを貼り付けるだけで、ストアのどのページにも地図を表示できます。テーマエディタから直感的に設定でき、コーディングの知識は一切不要です。タイトルと説明文を入力すると、地図とテキストが並ぶ2カラムレイアウトに自動で切り替わります。PC・スマホ別に地図の位置・高さ・幅を細かく設定でき、グレースケールやセピアなどのフィルター効果やカラーカスタマイズにも対応しています。
特徴
- Google Maps の埋め込みコードを貼り付けるだけで、テーマに地図を表示できます
- タイトル・説明文の入力で地図と並ぶ2カラムレイアウトに自動で切り替わります
- PC・スマホ別に地図の位置・高さ・幅を独立してカスタマイズできます
- グレースケール・セピア・色相変更などのフィルターで地図の見た目を調整できます
ストアに簡単に Google Maps の地図を埋め込める！
Google Maps の「共有」から取得した埋め込みコードを貼り付けるだけで、ストアに地図を表示できます。コーディングの知識は不要で、テーマエディタから直感的に設定できます。
マップとテキストの2カラム表示ができる！
タイトルや説明文を入力すると、地図とテキストが横に並ぶ2カラムレイアウトに自動で切り替わります。店舗の住所や営業時間などの情報を地図と一緒に表示できます。
マップの見た目をノーコードでカスタマイズできる！
グレースケール・セピア・階調反転・色相変更などのフィルター効果を使って、地図の見た目をストアのデザインに合わせてカスタマイズできます。
色やテキスト、レイアウトを自由にカスタマイズできる！
タイトルや説明文の文字サイズ・色・文字揃え、ブロックの背景色など、デザインの細部までカスタマイズできます。ストアの雰囲気に合わせた地図表示が可能です。
1クリックでテーマに追加できる！
アプリの管理画面からテーマを選んで「テーマに追加」をクリックするだけで、簡単に地図ブロックをテーマに追加できます。
アプリのインストール
以下のリンクからアプリをインストールできます。
シンプル Google Maps 表示｜お手軽マップ埋め込み - Shopify App Store
- Basic Plan: $9.99/月
- 7日間の無料体験
- 年払いで実質2ヶ月分無料でお得にご利用いただけます
インストール手順
1. Shopify 管理画面の左下にある「設定」をクリック
2. 「アプリ」をクリックし、「Shopify App Store」へ移動
3. 検索窓にアプリ名を入力し、表示されたアプリをクリック
検索窓に「シンプル Google Maps 表示｜お手軽マップ埋め込み」と入力して検索してください。
4. アプリ詳細画面で「インストール」をクリック
5. 権限の確認画面が表示されるので内容を確認し、「インストール」を完了
権限の内容をご確認いただき、問題なければ「インストール」をクリックしてください。
アプリブロックをテーマに追加
自動でテーマに追加（1クリック追加）
アプリの管理画面から、1クリックでテーマに追加できます。
1. アプリの管理画面を開く
Shopify 管理画面の「アプリ」から「シンプル Google Maps 表示｜お手軽マップ埋め込み」を開きます。
2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリック
テーマのプルダウンから追加先のテーマを選択し、「テーマに追加」ボタンをクリックしてください。
3. テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリック
テーマエディタが自動で開きます。地図ブロックの表示位置や各設定を確認し、問題なければ「保存する」をクリックしてください。
手動でテーマに追加（任意ページに設置したい場合）
トップページ以外のページに地図を追加したい場合は、手動でテーマに追加します。
1. Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開く
2. テーマエディタ上部のプルダウンから、追加したいページに移動
テーマエディタの上部にあるプルダウンメニューから、地図を追加したいページ（例: 会社概要ページ、お問い合わせページなど）を選択してください。
3. 「セクションを追加」または「ブロックを追加」をクリック
ページ内の追加したい位置で「セクションを追加」または「ブロックを追加」をクリックしてください。
4. 「アプリ」タブからアプリブロックを選んで追加
「アプリ」タブをクリックし、「シンプル Google Maps 表示｜お手軽マップ埋め込み」のブロックを選択して追加してください。
5. 表示を確認し、問題なければ「保存する」をクリック
地図の表示や設定を確認し、「保存する」をクリックして完了です。
Google Maps ブロックのカスタマイズ
テーマエディタから、Google Maps ブロックの各設定をカスタマイズできます。以下では、設定項目をグループごとに説明します。
Google Maps 埋め込みコード
| 設定名 | 説明 |
|---|---|
| Google Maps 埋め込みコード | Google Maps の「共有」→「地図を埋め込む」からコードをコピーして貼り付けてください。市街地マップ・航空写真のどちらがデフォルトで表示されるかは、コードを取得したときに Google Maps で選択していた表示タイプによって決まります。 |
この設定が地図表示の基本となります。Google Maps で表示したい場所を開き、「共有」ボタンから「地図を埋め込む」を選んでコードを取得してください。
コンテンツ設定
タイトルと説明文を設定できます。タイトル・説明文の両方が未設定の場合はマップが1カラムで表示されます。
| 設定名 | 説明 |
|---|---|
| タイトル | 地図と並べて表示するタイトルを入力します。店舗名やアクセス情報の見出しなどに便利です。 |
| 説明文 | 地図と並べて表示する説明文を入力します。リッチテキストに対応しているので、太字やリンクなども使用できます。店舗の住所や営業時間、アクセス方法などを記載するのがおすすめです。 |
タイトルまたは説明文のいずれかを入力すると、地図とテキストが横に並ぶ2カラムレイアウトに自動で切り替わります。
レイアウト設定
PC とスマホそれぞれで、地図の位置やサイズを個別にカスタマイズできます。
| 設定名 | 説明 |
|---|---|
| 地図の位置（PC） | PC での地図の配置を「左」または「右」から選択します。テキストコンテンツとのバランスを考慮して選んでください。 |
| 地図の位置（スマホ） | スマホでの地図の配置を「コンテンツの上」または「コンテンツの下」から選択します。スマホでは縦並びのレイアウトになります。 |
| コンテンツの上下位置（PC） | PC でのテキストコンテンツの上下方向の配置を「上揃え」「中央揃え」「下揃え」から選択します。地図の高さに対してテキストが少ない場合に便利です。 |
| 地図の高さ（PC） | PC での地図の高さをピクセルで指定します（200〜800px、初期値: 400px）。コンテンツの高さが設定値より大きい場合は、コンテンツの高さに合わせて地図が伸びます。 |
| 地図の高さ（スマホ） | スマホでの地図の高さをピクセルで指定します（100〜800px、初期値: 300px）。 |
| 地図の幅（PC・1カラム） | 1カラム表示時（タイトル・説明文なし）の地図の最大幅をピクセルで指定します（0〜1000px、初期値: 0）。0 に設定するとセクション幅いっぱいに表示されます。 |
| 地図の幅（PC・2カラム） | 2カラム表示時の地図の幅をパーセントで指定します（10〜90%、初期値: 50%）。残りの幅にテキストコンテンツが表示されます。 |
| 地図の幅（スマホ） | スマホでの地図の最大幅をピクセルで指定します（0〜1000px、初期値: 0）。0 に設定するとセクション幅いっぱいに表示されます。 |
スタイル設定
地図のフィルター効果や、タイトル・説明文のデザインをカスタマイズできます。
マップのフィルター
| 設定名 | 説明 |
|---|---|
| マップの UI を非表示 | チェックを入れると、Google Maps のズームボタンやストリートビューボタンなどの UI 要素を非表示にします。すっきりとした見た目にしたい場合に便利です。 |
| グレースケール | 地図をモノクロ（白黒）に変換する度合いを指定します（0〜100%、初期値: 0%）。落ち着いた雰囲気のストアデザインに合わせたい場合におすすめです。 |
| セピア | 地図にセピア調のフィルターをかける度合いを指定します（0〜100%、初期値: 0%）。レトロな印象を演出したい場合に便利です。 |
| 階調反転 | 地図の色を反転させる度合いを指定します（0〜100%、初期値: 0%）。ダークモード風のデザインに合わせたい場合に使用できます。 |
| 色相変更 | 地図全体の色相を回転させる角度を指定します（0〜360度、初期値: 0度）。ストアのブランドカラーに近い色味に調整したい場合に便利です。 |
タイトルのスタイル
| 設定名 | 説明 |
|---|---|
| タイトルの文字揃え | タイトルの文字揃えを「左揃え」「中央揃え」「右揃え」から選択します。 |
| タイトルの文字サイズ（PC） | PC でのタイトルの文字サイズをピクセルで指定します（10〜60px、初期値: 20px）。 |
| タイトルの文字サイズ（スマホ） | スマホでのタイトルの文字サイズをピクセルで指定します（10〜60px、初期値: 20px）。 |
| タイトルの文字の太さ | タイトルの文字の太さを「通常」または「太字」から選択します。 |
| タイトルの文字の色 | タイトルの文字の色を指定します（初期値: #000000）。 |
説明文のスタイル
| 設定名 | 説明 |
|---|---|
| 説明文の文字サイズ（PC） | PC での説明文の文字サイズをピクセルで指定します（10〜40px、初期値: 14px）。 |
| 説明文の文字サイズ（スマホ） | スマホでの説明文の文字サイズをピクセルで指定します（10〜40px、初期値: 14px）。 |
| 説明文の文字揃え | 説明文の文字揃えを「左揃え」「中央揃え」「右揃え」から選択します。 |
| 説明文の文字の色 | 説明文の文字の色を指定します（初期値: #000000）。 |
ブロックの背景色
| 設定名 | 説明 |
|---|---|
| ブロックの背景色 | ブロック全体の背景色を指定します。未設定の場合は透明（テーマの背景色）になります。地図ブロックを目立たせたい場合やセクションを区切りたい場合に便利です。 |
余白設定
ブロック全体の余白や、コンテンツ間のスペースを細かく調整できます。
| 設定名 | 説明 |
|---|---|
| コンテンツの内側の余白（PC） | PC でのテキストコンテンツ部分の内側の余白をピクセルで指定します（0〜100px、初期値: 32px）。 |
| コンテンツの内側の余白（スマホ） | スマホでのテキストコンテンツ部分の内側の余白をピクセルで指定します（0〜100px、初期値: 0px）。 |
| マップとコンテンツ間の余白（スマホ） | スマホで地図とテキストコンテンツの間の余白をピクセルで指定します（0〜100px、初期値: 32px）。 |
| タイトルと説明文間の余白（PC） | PC でのタイトルと説明文の間の余白をピクセルで指定します（0〜200px、初期値: 24px）。 |
| タイトルと説明文間の余白（スマホ） | スマホでのタイトルと説明文の間の余白をピクセルで指定します（0〜200px、初期値: 24px）。 |
| ブロック上部の余白（PC） | PC でのブロック上部の外側の余白をピクセルで指定します（0〜400px、初期値: 80px）。 |
| ブロック上部の余白（スマホ） | スマホでのブロック上部の外側の余白をピクセルで指定します（0〜400px、初期値: 80px）。 |
| ブロック下部の余白（PC） | PC でのブロック下部の外側の余白をピクセルで指定します（0〜400px、初期値: 80px）。 |
| ブロック下部の余白（スマホ） | スマホでのブロック下部の外側の余白をピクセルで指定します（0〜400px、初期値: 80px）。 |
| ブロック左右の内側余白（PC） | PC でのブロック左右の内側の余白をピクセルで指定します（0〜200px、初期値: 0px）。 |
| ブロック左右の内側余白（スマホ） | スマホでのブロック左右の内側の余白をピクセルで指定します（0〜200px、初期値: 0px）。 |
| ブロック上部の内側余白（PC） | PC でのブロック上部の内側の余白をピクセルで指定します（0〜200px、初期値: 0px）。 |
| ブロック上部の内側余白（スマホ） | スマホでのブロック上部の内側の余白をピクセルで指定します（0〜200px、初期値: 0px）。 |
| ブロック下部の内側余白（PC） | PC でのブロック下部の内側の余白をピクセルで指定します（0〜200px、初期値: 0px）。 |
| ブロック下部の内側余白（スマホ） | スマホでのブロック下部の内側の余白をピクセルで指定します（0〜200px、初期値: 0px）。 |
追加の CSS（カスタム CSS）
| 設定名 | 説明 |
|---|---|
| 追加の CSS | ブロックに独自の CSS を追加できます。テーマエディタの設定だけでは実現できない細かなデザイン調整を行いたい場合に使用してください。CSS の知識がある方向けの上級者向け設定です。 |
おわりに
「シンプル Google Maps 表示｜お手軽マップ埋め込み」の主な特徴をまとめます。
- 簡単導入: Google Maps の埋め込みコードを貼り付けるだけで、ストアに地図を表示できます
- 柔軟なレイアウト: タイトル・説明文付きの2カラムレイアウトや、PC・スマホ別のレイアウト設定に対応しています
- 豊富なカスタマイズ: フィルター効果・カラー・文字サイズなど、デザインの細部までノーコードでカスタマイズできます
料金
- Basic Plan: $9.99/月
- 7日間の無料体験
- 年払いで実質2ヶ月分無料でお得にご利用いただけます
アプリストア
シンプル Google Maps 表示｜お手軽マップ埋め込み - Shopify App Store
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
