GoogleマップのAPIキーを登録する

このページはDec 10, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/map-section-api-keyをご覧ください。

マップセクションをテーマに追加して、ビジネスの所在地を表示することができます。Shopifyの無料テーマの大半には、ホームページに追加できるマップセクションが含まれています。

マップを表示するには、GoogleマップのAPIキーを登録し、テーマエディタのマップセクション設定にそれを含める必要があります。

目次

GoogleマップのPlatformの使用

GoogleのAPIを使用してテーマにマップセクションを追加すると、GoogleマップのPlatform利用規約に同意したことになります。

2018年6月11日付で、GoogleマップのPlatformには、GoogleマップのAPIの構成方法と使用方法に対するいくつかの変更が追加されました。これらのAPIを使用するには、GoogleマップのPlatformに課金アカウントを設定する必要があります。上限までサービス利用料に充てることができる継続的な月次クレジットが提供されます。

料金設定の詳細については、GoogleマップのPlatform、「価格設定と請求に関するドキュメント」を参照してください。

GoogleマップのAPIキーを登録する

GoogleマップのAPIキーを登録できます。

手順:

  1. GoogleマップのPlatformページにアクセスし、[開始] をクリックします。

  2. 商品のマップ、ルート、場所を選択し、これらの無料テーマのマップセクションで作業するために必要なAPIを入手します。

  3. 続行するをクリックします。

  4. 新しい名前を作成するか、既存のプロジェクトを選択します。

  5. 利用規約に同意したら、[次へ] をクリックします。

  6. GoogleマップのPlatformで請求先アカウントを作成します。新しいGoogleマップのPlatformでは、請求先アカウントが必要です。詳細については、GoogleマップのPlatform、「価格設定と請求に関するドキュメント」を参照してください。

  7. GoogleマップのPlatformを有効にしたら、新しいGoogleマップのAPIキーをクリップボードにコピーします。

テーマにGoogleマップのAPIキーを追加する

テーマにGoogleマップのAPIキーを追加できます。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [セクションを追加する] をクリックします。
  4. [マップ] をクリックし、[選択] をクリックします。
  5. マップの情報を入力します。GoogleマップのAPIキーフィールドに、GoogleマップのAPIキーを貼り付けます。
  6. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [セクションを追加する] をクリックします。
  7. [マップ] をクリックし、[選択] をクリックします。
  8. マップの情報を入力します。GoogleマップのAPIキーフィールドに、GoogleマップのAPIキーを貼り付けます。
  9. [保存] をクリックします。
Android
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [セクションを追加する] をクリックします。
  7. [マップ] をクリックし、[選択] をクリックします。
  8. マップの情報を入力します。GoogleマップのAPIキーフィールドに、GoogleマップのAPIキーを貼り付けます。
  9. [保存] をクリックします。

GoogleマップのPlatformのAPISと通信する際にエラーが発生した場合、マップはテーマエディタで指定した背景画像または色に置き換えられます。

APIアクセスをストアのみに制限する

GoogleマップのPlatformでは、APIへのアクセスを制限するように求められます。APIキーはマップの固有IDなので、自分のドメインのみにアクセスを制限して他の人がAPIキーを使用できないようにします。

手順:

  1. Google APIの資格情報ページに移動します。

  2. メニューからプロジェクトを選択します。

  3. 編集用の生成済みAPIキーを選択します。

  4. アプリケーションの制限で、HTTP参照元 をクリックし、.myshopify.comドメインを含む、ストアに関連付けられているドメインを入力します。たとえば、カスタムドメインがある場合は、https://myCustomDomain.com/* と https://shop1.myshopify.com/*の両方を入力します。

  5. [保存] をクリックします。

GoogleマップのPlatform使用に代わる方法

ウェブサイトにマップを表示したいものの、GoogleマップのPlatformのサービスを使用したくない場合は、ページに埋め込みマップを配置できます。

埋め込みマップはHTMLを使用します <iframe> 。リッチテキスト入力フィールドがある任意のページまたはホームページセクションに配置することができます。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す