Проблема с Google Maps JavaScript API

После переноса клиентского сайта на его домен перестала работать карта, хотя всё было добавлено правильно и ничего не менялось. Разрабатывали всё также в интернете, но на поддомене, а когда перенесли на виртуальный хостинг и повесили сайт на домен, случилась ошибка и выглядела она так, как будто всё работает, но что-то происходит не так и карта исчезает.

Проблема на фронтенде отбражалась вот так:
Проблема на фронтенде

Сама ошибка рекомендовала зайти в консоль и посмотреть ошибку через неё. Вот что мы там видим:

Собственно, здесь рассказывается история про ошибку взаимодействия с API, а если быть точным, то оно самое не активно. Что же мы делаем? Мы идём, и создаём Google Api Key.

Создание ключа происходит на этой странице:
https://developers.google.com/maps/documentation/javascript/get-api-key

Создание ключа

После нажатия на кнопку «GET A KEY» создаём новый проект, называем его понятным названием и получаем ключ.

Так как у нас всё уже встроено в шаблон и по условию функции определяется введён ключ в поле или нет, вроде как бы мы ничего здесь больше не должны делать и всё должно работать. Однако не работает.

Здесь ссылка начинается на слэш. Изначально ссылка выглядела как https://, но так как

  • наш сайт работает через ssl-протокол,
  • запрос до скрипта api’шного идёт на https,

я люблю убирать такие вхождения. Это моё личное задротство, поэтому не обращайте внимания. 😀 Аналогичные отношения у меня и с utm-метками. Если я вижу такие добавления к ссылкам, я это удаляю. 😀

Так вот.

Библиотека API от Google содержит кучу-кучу-кучу апишных библиотек на все случаи жизни. И даже что касается карт, там можно найти несколько библиотек, которые не знающего человека собъют с толка.

Я перетыкал несколько. Потому что в час ночи не всегда мозг  можно удачно включить. В это время он обычно выключается. Мой случай — Google Maps JavaScript API.

И это всё Google Maps API:
И это всё Google Maps API

Каждая библиотека включается и выключается отдельно:
Каждая библиотека включается и выключается отдельно

В хелпе гугла сокращённо можно прочитать немного полезной информации. Хотя, если вы оказались на данной странице, вы уже что-то про библиотеки должны знать.

Как использовать ключ API

Чтобы использовать этот API, нужен ключ. Он позволяет идентифицировать проект и определить его квоты и параметры доступа. Получить ключ API можно на странице «Учетные данные». Обратите внимание, что для каждой платформы, например Android или iOS, нужен отдельный ключ.
Как использовать ключ API

У меня всё заработало и это отобразилось на графике трафика и ошибок:
график трафика и ошибок google maps api

Ну и собственно, можно обновлять страницу сайта с картой Google Maps и любоваться картой, которая снова работает!

Google Maps

Знать что такое API и работать с этими библиотеками является очень хорошим программистским навыком. Всегда хотел научиться, тем более что ничего там особо сложного нет. Документация к каждой библиотеке своя, но принцип работы похож.

Настроить взаимодействие стороннего api с вашим проектом в сети даст большое преимущество перед другими середнячками.

У меня есть цель научиться. И я её когда-нибудь завершу. 🙂

Site Footer