プログラミング

ShopifyにGoogle Mapsが表示できない時やること【住所を調べる際にエラーが発生】

ShopifyにGoogle Mapsを表示させる場合、基本的には公式サイトの通り進めればいいかと思います。

https://help.shopify.com/ja/manual/online-store/legacy/using-themes/change-the-layout/theme-settings/map-section-api-key

しかし、それでも

住所を調べる際にエラーが発生しました

と出ることがあります。

ShopifyのテーマにGoogle Mapsを反映させるには、実は以下二点のAPIが必要となります。

  • Maps JavaScript API
  • Geocoding API

今回は無料テーマのDebutで検証しています

Google Mapsが表示できている場合

Shopify Googlemaps 表示

APIを有効化する


画像の通り、

  1. Google Cloud Platformから「APIとサービスを有効化」
  2. 「Maps JavaScript API」及び「Geocoding API」を有効にする
  3. この2つが紐づいたAPIキーをテーマのセクションの「マップ」に入れて完了