Ошибка модуля карта в редакторе Web Presence Builder: This page didn't load Google Maps correctly. See the JavaScript console for technical details

Создана:

2016-11-16 12:47:52 UTC

Изменена:

2017-06-04 22:09:40 UTC

2

Помогла ли вам статья?


Есть вопросы?

Отправить запрос

Ошибка модуля карта в редакторе Web Presence Builder: This page didn't load Google Maps correctly. See the JavaScript console for technical details

Симптомы

После публикации сайта, созданного в Web Presence Builder, для модуля Maps возникает следующая ошибка:

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.

Причина

Компания Google внесла дополнительные ограничения в интерфейс программирования модуля (API) Google Maps, вследствие чего, использование данного модуля требует наличия уникального ключа.С анонсом компании Google можно ознакомиться по ссылке

Данная ситуация была зарегистрирована как внутренняя проблема Web Presence Builder с номером #PPPM-4671

Временное решение

I. Получите ключ

  1. Создайте учетную запись на сайте Google и войдите в него.

  2. Пройдите по ссылке https://developers.google.com/maps/documentation/javascript/ и нажмите кнопку GET A KEY , а затем CONTINUE

  1. Выберите Создать проект и нажмите Продолжить

  1. Зайдите во вкладку Учетные данные, и нажмите Создать учетные данные -> Ключ API -> Ключ для Браузер

  1. Укажите имя домена, на котором будет использоваться модуль Google и нажмите Создать

  1. Скопируйте появившийся ключ в текстовый файл.

  1. Убедитесь, что включены все необходимые API. Для этого перейдите в меню Обзор > Включенные API

Существует два варианта добавления Google Maps на сайт через WPB

**II. Применить на сервере патч, подготовленный разработчиками Plesk.

  1. В редакторе WPB выберите модуль Карта и разместите его на сайте
  2. Наведите курсор на добавленный модуль и нажмите Изменить .
  3. Укажите ваш Google Maps API key
  4. Нажмите Ок .

ИЛИ

III. Добавьте модуль "Скрипт" в Web Presence Builder

  1. В редакторе WPB выберите модуль Скрипт и разместите его на сайте

  1. Добавьте Google Maps в виде HTML кода и нажмите OK .

Пример HTML кода приведен ниже. Здесь YOUR_API_KEY должен быть заменен API ключом, сгенерированным в первой части статьи, а параметры height и width указывают размер модуля на странице:

    <html>
<head>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

Дополнительная информация о параметрах HTML кода выше может быть найдены на сайте Google

III. Опубликуйте веб-сайт

Внимание: Сайт с модулем Google Maps может быть загружен только 25,000 раз в день. После преодоления этого порога, модуль так же станет недоступен. Дополнительная информация о платных ключах с большим количеством загрузок может быть получена здесь

Информация Если ранее установленный модуль Google Maps возвращает ошибку MissingKeyMapError , такое поведение может быть внутренней проблемой компании Google: Issue 9975- Bug: Suddenly error occur for "Missing Key Map Error"

Вложения:

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 2 из 6
Еще есть вопросы? Отправить запрос
Войдите в службу, чтобы оставить комментарий.