Google Maps API error: MissingKeyMapError

Google Maps API error: MissingKeyMapError

2 июля 2016 5 918 11

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

ThemeForest: Лучшие темы интернет-магазинов для WordPress
ThemeForest: Лучшие темы интернет-магазинов для WordPress

Не сложно догадаться, что речь идёт о каком-то ключе.

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

Да, действительно, работало и сейчас прекрасно работает. Но для всех новых сайтов, а именно запущенных после 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.

Комментарии
  • Nick Orlov

    Не могу найти в WordPress теме такой код… ни в functions ни в header/footer. Где еще он может быть? У меня тема «BeTheme»

    • В BeTheme не нужно править код, ключ можно ввести в настройках. В коде вызов API происходит здесь: functions/theme-shortcodes.php. В этой теме кстати он вызывается с немного другого URL: //maps.google.com/maps/api/js

  • Вобщем шняга такая у меня по активации ключа на 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=КЛЮЧ» в моём коде и перезагрузить его в корневую директорию сайта?

  • В общем — у меня ничего не получилось…

  • Dmitry

    Здравствуйте, Иван!

    Подскажите, пожалуйста, этот ли код отвечает за интеграцию карты? Если да, то как мне в него добавить ключ? Заранее спасибо!

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

      Это инициализация карты для фрейма. Используются ли в вашей теме иные подключения, я сказать не могу.

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее