Решения для ошибок Google Maps на веб-сайте вашей компании

Я подавал заявку на работу удаленного разработчика в компанию-разработчика программного обеспечения Clevertech, когда заметил проблему на их странице вакансий с контейнером, на котором были запущены Google Maps. Что-то выглядело действительно не так, и в последнее время я довольно часто сталкивался с этой ошибкой, поскольку Google Maps больше не бесплатен. Многочисленные оранжевые точки и сообщения о местоположении в каждом кадре с сеткой отображали две распространенные ошибки: «Только для целей разработки» и предупреждение «Карты Google не могут отображаться правильно».

Я был удивлен, что довольно известная технологическая компания до сих пор показывает такую ​​вопиющую ошибку, чтобы мир мог ее увидеть на своем веб-сайте. Я просмотрел репозитории Clevertech на GitHub, чтобы узнать, является ли их основной сайт общедоступным, и оказалось, что это не так. Черт… Если бы это было так, я мог бы легко разветвить репозиторий и внедрить исправление, а также сделать запрос на извлечение с исправлением. Узнав, что их репозитории не являются общедоступными, я сделал то, что сделал бы любой хороший разработчик: я изучил, как решить эту проблему другими способами.

Проблема: Карты Google больше не бесплатны. Вы должны связать кредитную карту, чтобы вам могли выставлять счета, если на вашем сайте есть запросы, превышающие кредит в 200 долларов, который они ежемесячно предоставляют бесплатно. Общая проблема с новой биллинговой системой заключается в том, что теперь вам нужно активировать каждый API отдельно. Все они имеют разную цену (некоторые из них даже бесплатны), поэтому Google старается включить их отдельно для своего домена. Ошибка «Только для целей разработки» возвращается, если выполняется любое из следующих условий:

  • В запросе отсутствует ключ API.
  • Выставление счетов не включено в вашем аккаунте.
  • Предоставленный способ выставления счетов недействителен (например, просроченная кредитная карта).
  • Был превышен установленный вами дневной лимит.

Я придумал несколько очень практичных и упрощенных решений:

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

  1. Перейдите по этой ссылке: https://console.developers.google.com/apis/dashboard
  2. Выберите свой проект в раскрывающемся меню.
  3. Перейдите в библиотеку на левой боковой панели.
  4. Просмотрите доступные API и включите тот, который вам нужен!

Однако даже если платежная информация обновлена ​​и вы активировали правильные ключи API, проблемы все равно могут возникнуть. Одним из решений, которое я нашел полезным для этой конкретной проблемы, было использование надстройки Chrome «Проверка API платформы Google Maps», чтобы определить и решить, какой ключ API необходим/отсутствует.

По сути, эта надстройка направила меня по этой ссылке: https://developers.google.com/maps/documentation/javascript/get-api-key.

Оттуда я смог войти в Google и создать бесплатный ключ API. После этого я обновил свой JavaScript, и проблема сразу же решилась!

Старый JavaScript:

…script src="https://maps.googleapis.com/maps/api/js?v=3 …

Обновленный Javascript:

…script src="https://maps.googleapis.com/maps/api/js?key=*****GOOGLE API KEY******&v=3 …

Есть еще одно возможное решение, не использующее Google Maps, а использующее аналогичный альтернативный сервис под названием OpenStreetMap. Существует простой способ использовать его на вашем сайте, подробно описанный с кодом для этого здесь: https://handyman.dulare.com/switching-from-google-maps-to-openstreetmap/

К сожалению, в OpenStreetMaps нет простого способа указать направление от одной точки к другой, а также нет просмотра улиц, такого как Google Maps.

Наконец, вот 8 сервисов, альтернативных Google Maps, и почему они важны: https://www.maketecheasier.com/google-map-alternatives/