Перейти до основного вмісту

4️⃣ Ключі Google API

Baltix використовує два ключі Google:

  • Ключ браузера для відображення карти під час оформлення замовлення/на сторінці подяки.
  • Ключ сервера для геокодування (перетворення адреси на координати).
Без ключа

Селектор пунктів видачі працює і без ключа Google Maps — клієнти побачать представлення у вигляді списку замість карти. Додавання ключа вмикає вид карти для кращого досвіду.

Крок 1 — Створіть проект Google Cloud​

  1. Перейдіть до Google Cloud Console

  2. Увійдіть у свій обліковий запис Google (або створіть новий)

  3. Натисніть Select a project у верхній панелі (1)

  4. Потім New Project (2) Test

  5. Дайте йому назву (наприклад, My Shopify Store) (3) і натисніть Create (4) Test

  6. Потім перейдіть до проекту, натиснувши (1), а потім (5)

Безкоштовний рівень

Google надає безкоштовний кредит $200 на місяць для використання Maps API. Для більшості магазинів це означає, що карта фактично є безкоштовною.

Крок 2 — Увімкніть необхідні API​

Увімкніть усі три API

Baltix вимагає три API Google Maps. Ви повинні увімкнути всі три:

APIПризначення
Maps JavaScript APIІнтерактивна карта у селекторі пунктів видачі під час оформлення замовлення
Geocoding APIГеокодування адреси на стороні сервера для сортування за відстанню
Maps Static APIГенерує зображення карти, що відображається у підтвердженні замовлення

Для кожного API дотримуйтесь однакового процесу:

  1. Знайдіть apis and services (2) у рядку пошуку вгорі (1)
  2. Натисніть APIs & Services

Test

  1. Потім натисніть + Enable APIs and services

Test

  1. Знайдіть назву API (наприклад, Maps JavaScript API) у полі пошуку

Test

  1. Натисніть на нього

Test

  1. Потім натисніть Enable

Test

Повторіть кроки 3–6 для Geocoding API і Maps Static API.

Необхідно налаштувати платіжний акаунт

Google вимагає прив'язки платіжного акаунту до вашого проекту, навіть якщо ви залишаєтесь у межах безкоштовного рівня. Перейдіть до Billing у консолі, щоб налаштувати його.

Крок 3 — Створіть ключ браузера (Maps)​

  1. Поверніться до APIs & Services
  2. Натисніть Credentials (1)

Test

  1. Потім + Create Credentials (2)
  2. Потім API key (3)

Test

  1. (Необов'язково) Дайте назву вашому ключу (4)
  2. У розділі Application restrictions виберіть Websites (5)

Test

  1. Додайте обмеження для веб-сайтів.
Цей крок є обов'язковим

З міркувань безпеки цей крок захисту є обов'язковим, оскільки ключ API буде доступний усім клієнтам. Це означає, що будь-хто зможе побачити ключ API. Без цих обмежень будь-хто, хто скопіює цей ключ, зможе ним скористатися.

Щоб додати новий веб-сайт, натисніть Add (6). Додайте ваш домен Shopify та ваш власний домен, якщо він є.

Наприклад, якщо ваш магазин — baltic-fashion.myshopify.com із власним доменом www.baltic-fashion.com або baltic-fashion.com: Вам потрібно додати точно:

baltic-fashion.com/*
*.baltic-fashion.com/*
baltic-fashion.myshopify.com/*
shop.app/*
admin.shopify.com/*
Важливо для доменів MyShopify

Не використовуйте лише *.baltic-fashion.myshopify.com/*. Це не збігається з кореневим доменом baltic-fashion.myshopify.com/* і спричиняє помилку RefererNotAllowedMapError.

Замініть URL-адреси

Замініть приклади URL-адрес вище власними доменами вашого магазину.

Test

  1. Натисніть Save (8)

Потім встановіть обмеження API для цього ключа:

  • Maps JavaScript API
  • Maps Static API

Крок 4 — Створіть ключ сервера для геокодування​

Створіть другий ключ у APIs & Services > Credentials:

  1. Натисніть + Create Credentials > API key
  2. Встановіть Application restrictions на None
  3. Встановіть API restrictions лише на Geocoding API

Не використовуйте обмеження HTTP-реферера для цього ключа сервера.

Крок 5 — Встановіть щоденні квоти (необов'язково)​

Щоб уникнути несподіваних витрат, ви можете встановити щоденний ліміт запитів:

  1. Перейдіть до APIs & Services > Maps JavaScript API
  2. Натисніть вкладку Quotas
  3. Встановіть щоденний ліміт (наприклад, 1000 запитів/день — більш ніж достатньо для більшості магазинів)

Крок 6 — Додайте ключі в Baltix​

  1. Відкрийте додаток Baltix у вашій адмін-панелі Shopify
  2. Перейдіть до Settings > General
  3. Вставте ключ браузера в поле Google Maps API Key
  4. Вставте ключ сервера в поле Geocoding API Key (Server)
  5. Натисніть Save

Перевірка роботи​

  1. Перейдіть до вашого магазину та додайте товар до кошика
  2. Перейдіть до оформлення замовлення та виберіть метод доставки, прив'язаний до перевізника
  3. Селектор пунктів видачі повинен відображатися у вигляді карти

Якщо ви бачите список, але не карту, перевірте розділ усунення несправностей нижче.

Усунення несправностей​

ПроблемаРішення
Карта не з'являєтьсяПереконайтеся, що всі три API увімкнені (Крок 2)
Карта відображається, але пункти видачі розташовані неправильноПереконайтеся, що Geocoding API увімкнений і Geocoding API Key (Server) заповнений у Baltix
Немає зображення карти у підтвердженні замовленняПереконайтеся, що Maps Static API увімкнений
«ApiNotActivatedMapError» у консолі браузераУвімкніть платіжний акаунт у вашому проекті Google Cloud
«RefererNotAllowedMapError»Перевірте обмеження HTTP-реферера. Додайте точний кореневий домен (your-store.myshopify.com/*), а не лише *.your-store.myshopify.com/*
Карта завантажується, але показує «For development purposes only»Прив'яжіть платіжний акаунт до вашого проекту Google Cloud
Ключ збережено, але карта все ще не відображаєтьсяЗачекайте кілька хвилин — Google може витратити до 5 хвилин на поширення нового ключа