Shopify. Как решить проблему отсутствия Google Карты

Добрый день! Из этого видео-туториала Вы узнаете, как решить проблему отсутствия Google Карты в шаблонах Shopify.

Google Карта может исчезнуть в вашем интернет-магазине.

Этот случается из-за изменений, которые Google недавно внес в свою политику – теперь Вы должны добавить ваш личный ключ API в карту, для того чтобы он функционировала.

Давайте узнаем, как решить эту проблему.

Во первых, получите ваш личный ключ API.

1. Перейдите на сайт https://developers.google.com/maps/documentation/javascript/get-api-key и создайте ваш ключ авторизации, нажав на кнопку «Получить ключ» (Get a Key):

   

2. Выберите параметр «Создать проект» (Create a project) и нажмите на кнопку «Продолжить» (Continue):

   

3. В открывшемся окне заполните обязательные поля и нажмите на кнопку «Создать» (Create):

   

4. Сделав это, Вы получите созданный для Вас ключ:

   

Теперь, нужно добавить созданный ключ в скрипт карты вашего интернет-магазина.

Войдите в вашу админ панель Shopify.

1. Перейдите на вкладку Интернет-магазин -> Шаблоны (Online Store -> Themes):

   

2. Затем, нажмите на кнопку «…» справа вверху и выберите настройку «Редактировать HTML/CSS» (Edit HTML/CSS):

   

3. В открывшемся окне нажмите на название файла widget-googlemap.liquid в папке Snippets, для того чтобы открыть файл для редактирования:

   

4. Найдите следующий код на строке 3:

   <script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>

5. Добавьте следующий фрагмент кода сразу после вопросительного знака (?):

   key=XXXXXXXXXXXXXXXXXX&

   Здесь XXXXXXXXXXXXXXXXXX – это ваш личный ключ API.

   Код должен выглядеть следующим образом:

   <script src="//maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXX&v=3.exp"></script>

6. После этого, нажмите на кнопку «Сохранить» (Save), для того чтобы применить изменения:

   

7. Перейдите на фронтенд вашего сайта и обновите страницу для просмотра изменений.

8. Как Вы можете видеть, карта теперь отображается:

   

Это конец туториала. Теперь Вы знаете, как решить проблему отсутствия Google Карты в вашем шаблоне Shopify.

Вы можете также ознакомиться с детальным видео-туториалом ниже: