Google Maps API error: MissingKeyMapError

Опубликовано 8 лет назад

На прошлой неделе многие заметили проблемы с интеграцией карт Google Maps, и сегодня мы разберемся в чем дело.

При вызове карты на некоторых сайтах перманентно возвращается ошибка «Oops! Something went wrong», а в русскоязычной локализации «При загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли JavaScript». Консоль сообщала следующее: «Google Maps API error: MissingKeyMapError». Не сложно догадаться, что речь идёт о каком-то ключе.

Какой ключ? Ведь раньше всё работало без ключей.

Да, действительно, работало и сейчас прекрасно работает. Но для всех новых сайтов, а именно запущенных после 22 июня 2016 года теперь придётся получать в Google Maps API ключи. О чём сообщалось в Google Geo Developers Blog.

Напомню, что бесплатные ключи API дают право на вызов Google Maps 25000 раз в сутки. Но в случае превышения лимита пока никто не запрещает использовать несколько таких ключей. Для сайтов с очень высокой посещаемостью возможно проще купить премиум-лицензию.

Как получить ключ API Google Maps?

На самом деле всё очень просто.

1. Идём по ссылке и нажимаем кнопку «Получить ключ».

Google API get key

2. Соглашаемся с условиями использования сервиса и нажимаем «Принять и продолжить».
Правила Google API

3. Вводим имя ключа и адрес сайта, на котором размещена карта. Например, для всех страниц домена danilin.biz в качестве источника можно указать danilin.biz/*.

Google API

Нажимаем кнопку «Создать» и получаем долгожданный ключ.

Google API Key

4. Подключаем ключ к вызову Google API.

Обычно он вызывается таким образом:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=ru"
  type="text/javascript"></script>

В конце URL в параметре key дописываем свой сгенерированный ключ.

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;language=ru&amp;key=KEY"
  type="text/javascript"></script>

Теперь карты должны работать.

Как исправить ошибку с ключом API Google Maps в WordPress

В WordPress чаще всего подключение всех скриптов осуществляется с помощью функции wp_enqueue_script() в файле functions.php.

Выглядит это примерно так:

wp_enqueue_script( 'google-map', '//maps.googleapis.com/maps/api/js?sensor=false&amp;language=ru');

Аналогично дописываем в URL вызова параметр key.

wp_enqueue_script( 'google-map', '//maps.googleapis.com/maps/api/js?sensor=false&amp;language=ru&amp;key=KEY');

Дилетанты обычно подключают скрипты прямо в header.php или footer.php без использования wp_enqueue_script(). Не исключено, что в любительских темах вы увидите подключение скриптов с помощью обычного HTML, как описывалось выше.

Успехов!

Иван Данилин
Автор Иван Данилин

Фулстек веб‑разработчик, специализируюсь на платформе WordPress

Подробнее
Комментарии
  1. Здравствуйте, Иван!

    Подскажите, пожалуйста, этот ли код отвечает за интеграцию карты? Если да, то как мне в него добавить ключ? Заранее спасибо!
    • Добрый день! Попробуйте передать ключ где-нибудь между параметрами source и output. Чтобы получилось типа такого: ….source=embed&key=ВАШКЛЮЧ&output=svembed….

      Это инициализация карты для фрейма. Используются ли в вашей теме иные подключения, я сказать не могу.
  2. Вобщем шняга такая у меня по активации ключа на BeTheme — у меня нет такого пункта в настройках темы… Что мне делать? Подскажите, пожалуйста.. https://uploads.disquscdn.com/images/8b10a0df890e824a2b15fe2dc5651fe495be87ad5e79fb977336458dde2044da.jpg
    • Подозреваю, что вы используете старую версию темы. Попробуйте обновиться до 14-й версии. Или внесите коррективы в код, в предыдущем комментарии я указал где в теме вызывается API Google Maps.
      • Доброго времени, Иван! Смотрите, я нашёл файл functions/theme-shortcodes.php. Но у меня код, указанный Вами в статье, отличается от Вашего. Как мне поступить, подскажите. Обновить тему я не могу, она не куплена..
        • Это один и тот же скрипт, вызываемый из разных доменов Google. Допишите в maps.google.com/maps/api/js?key=КЛЮЧ
          где КЛЮЧ — ваш ключ.
          • Доброго времени, Иван! Спасибо за ответ. Я дописал свой ключ в строке. Страница обновилась. Но перейдя на сайт, никаких изменений не произошло. Карты как не открывались, так и не открываются. Что я не так сделал? Или может мне прописать тег «key=КЛЮЧ» в моём коде и перезагрузить его в корневую директорию сайта?
  3. Не могу найти в WordPress теме такой код… ни в functions ни в header/footer. Где еще он может быть? У меня тема «BeTheme»
    • В BeTheme не нужно править код, ключ можно ввести в настройках. В коде вызов API происходит здесь: functions/theme-shortcodes.php. В этой теме кстати он вызывается с немного другого URL: //maps.google.com/maps/api/js
      • Странно, у меня такого нету… https://uploads.disquscdn.com/images/4ef70ecac488923c6cebef83f72806b94389b4a7c63e9dbae16c3d3775a86220.png

        Но мне помогло вот такое решение: в футер вставил такой код:

Добавить комментарий