Google Maps API – це потужний інструмент, який дозволяє вам вбудовувати інтерактивні карти на сторінки вашого магазину Shopify. Це може бути корисним для відображення розташування вашого магазину, створення карт маршрутів або надання інформації про доставку. У цій статті ми розглянемо, як отримати ключ Google Maps API та додати його у вашу тему Shopify.
Що таке Google Maps API і навіщо він потрібен?
Google Maps API – це набір інструментів та сервісів, що надаються Google, які дозволяють розробникам вбудовувати карти Google на свої веб-сайти та у додатки. За допомогою API ви можете налаштовувати зовнішній вигляд карт, додавати маркери, маршрути, інформацію про трафік тощо.
Навіщо додавати ключ Google Maps API в Shopify?
- Відображення місцезнаходження магазину: Ви можете використовувати карту Google, щоб показати клієнтам, де знаходиться ваш фізичний магазин або офіс.
- Створення карт маршрутів: Ви можете допомогти клієнтам знайти найкоротший шлях до вашого магазину, надавши їм карту маршруту.
- Розрахунок вартості доставки: Деякі додатки Shopify використовують Google Maps API для розрахунку вартості доставки на основі відстані.
- Візуалізація даних: Ви можете використовувати Google Maps API для відображення даних на карті, наприклад, розташування клієнтів або зон доставки.
Як отримати ключ Google Maps API
Перейдіть на сайт Google Cloud Platform: Відкрийте веб-браузер та перейдіть на сайт https://console.cloud.google.com/.
Створіть новий проект: Якщо у вас ще немає проекту, створіть його.
Увімкніть Google Maps API: У розділі “API та сервіси” знайдіть “Google Maps JavaScript API” та “Google Maps Geocoding API” та увімкніть їх для вашого проекту.
Створіть облікові дані: У розділі “Облікові дані” створіть новий ключ API. Виберіть тип ключа “API key”.
Обмежте використання ключа: Натисніть на щойно створений ключ API, щоб відкрити сторінку з його налаштуваннями. У розділі “Ограничения приложений” виберіть “HTTP-рефереры (веб-сайты)”. Додайте URL-адреси вашого магазину Shopify, включаючи версії з www та без www, а також ваш домен
*.myshopify.com. Наприклад:yourstore.com/*www.yourstore.com/*yourstore.myshopify.com/*
Скопіюйте ключ API: Скопіюйте створений ключ API. Він знадобиться вам для додавання у тему Shopify.
Як додати ключ Google Maps API у тему Shopify
Варіант 1: Використання вбудованого розділу Карта
- Увійдіть до панелі адміністратора Shopify.
- Перейдіть до розділу “Онлайн-магазин” -> “Теми”.
- Натисніть “Налаштувати” поруч із вашою активною темою.
- Додайте розділ “Карта” на сторінку, де ви хочете відобразити карту.
- Вставте скопійований ключ API у поле “Ключ API Google Maps”.
- Збережіть зміни.
Варіант 2: Вставка коду вручну
- Увійдіть до панелі адміністратора Shopify.
- Перейдіть до розділу “Онлайн-магазин” -> “Теми”.
- Знайдіть свою поточну тему та натисніть кнопку “Дії” -> “Редагувати код”.
- Знайдіть файл
theme.liquid(або аналогічний) та відкрийте його. - Вставте наступний код у потрібне місце (зазвичай у розділ
<head>):
<script src="https://maps.googleapis.com/maps/api/js?key=ВАШ_КЛЮЧ_API&callback=initMap" async defer></script>
Замініть “ВАШ_КЛЮЧ_API” на ваш ключ Google Maps API.
- Збережіть зміни.
Важливо:
- Обов’язково обмежте використання вашого ключа API лише для вашого домену Shopify, щоб запобігти його несанкціонованому використанню.
- Якщо ви використовуєте сторонній додаток для карт, дотримуйтесь інструкцій додатка для додавання ключа API.
Висновок
Додавання ключа Google Maps API у вашу тему Shopify відкриває безліч можливостей для покращення функціональності та користувацького досвіду вашого магазину. Дотримуючись цього керівництва, ви зможете легко вбудувати інтерактивні карти на свій сайт та використовувати їх для різних цілей.