Исправление: Эта страница не может корректно загрузить Google Maps

Google Maps — это картографический веб-сервис, предоставляющий географические регионы и карты дорог для любой точки мира. Однако некоторые владельцы сайтов получают ошибку «Эта страница не может корректно загрузить карты Google» вместо загрузки Google Map. Эта ошибка также может быть представлена в виде «Эта страница не загрузила карты Google правильно. Технические подробности см. в консоли JavaScript«.

Упс! Что-то пошло не так – Эта страница не смогла корректно загрузить карты Google

Примечание: Данное решение предназначено для владельцев сайтов, а не для обычных пользователей.

В чем причина некорректной загрузки Google Maps?

Карта Google Раньше плагины работали без ошибок, но за последние несколько лет ситуация изменилась, когда Google изменил свои правила для сайтов со встроенными картами. Раньше владельцы сайтов могли заставить это работать, просто используя встроенный код, но теперь для корректной работы Google Map требуется ключ API. Если у вас уже добавлен API-ключ, то вы можете посмотреть ‘Inspect Element -> Вкладка «Консоль’» в Chrome позволяет узнать точную причину, по которой Google не разрешает использовать Карты на вашем сайте. Причиной может быть неправильный ключ, ограничение доступа к ключу и т.д.

Добавьте API-ключ Google в настройки сайта

Для того чтобы карта Google работала для вашего проекта или сайта, необходимо создать ключ Google API и добавить его в настройки вашего сайта. Необходимо войти в систему Google Developers для создания ключа и устранения других ошибок.

Если вы вручную вставили скрипт для карт, то он должен выглядеть следующим образом с вашим API-ключом вместо YOUR_API_KEY

 <скрипт async отложить src="https://maps.googleapis.com/maps/api/js?ключ=YOUR_API_KEY&callback=initMap"
  введите="text/javascript"></script>

Поскольку WordPress является самой популярной CMS, на которой работает более 172 млн. сайтов, мы продемонстрируем шаги только для WordPress.

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

Плагины Google API в WordPress
Откройте настройки для ключа API на вашем сайте Сайт WordPress.
Перейдите к Google’s Cloud Resource Manager
Войдите в Google, если вы еще не вошли в систему
Нажмите кнопку «Создать проект (Create Project)«, назовите проект и нажмите кнопку «Создать«

Создание проекта
Перейти к Google’s Enabling API веб-страница.
Нажмите «Выберите проект» вверху, затем выберите новый проект, который вы только что создали и Продолжить
Нажмите «Включить API и сервисы«
Поиск «Maps JavaScript API» и откройте его
Затем нажмите кнопку «Включите«

Включение API для проекта
Щелкните меню Навигация, выберите пункт «API & Услуги» и перейдите к разделу «Учетные данные«
Нажмите кнопку Создать учетные данные в выпадающем списке и выберите «API-ключ«
Примечание: При желании вы можете сделать его ключом ограничения для предотвращения несанкционированного использования
Нажмите “Закройте ” затем нажмите на созданный Ключ
Выбрать «HTTP-рефереры» в разделе «Ограничения приложений
Добавьте URL-адрес вашего сайта и нажмите кнопку «Сохраните «
Теперь скопируйте ключ и вернитесь на сайт WordPress

Создание API-ключа для сайта
Прокрутите вниз под левой панелью и перейдите к пункту «Настройки «
Вы найдете опцию «Google API KEY«, откройте его и вставьте туда ключ.
Сохраните настройки, перейдите на свою страницу и обновите ее.

Примечание: Убедитесь, что биллинг включен, так как google позволяет использовать только 300$ кредита или 12 месяцев бесплатного использования (в зависимости от того, что уменьшается быстрее). После этого необходимо настроить и внедрить биллинг.