Не работает скрипт карты

Google Maps API error: MissingKeyMapError

На прошлой неделе многие заметили проблемы с интеграцией карт 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. Идём по ссылке и нажимаем кнопку «Получить ключ».

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

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

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

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

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

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

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

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

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

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

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

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

Делаю сайты на Вордпресс с 2008 года, занимаюсь их оптимизацией, поддержкой, делюсь опытом в блоге

Странно, у меня такого нету… https://uploads.disquscdn.com/images/4ef70ecac488923c6cebef83f72806b94389b4a7c63e9dbae16c3d3775a86220.png

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

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

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

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

Источник

На премиумных шаблонах перестали работать карты Google

Ошибка
При загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли JavaScript.

Переходим по ссылке «See the guide to API keys and client IDs.» и попадаем на страницу https://developers.google.com/maps/documentation/javascript/get-api-key

Жмем «Получить Ключ», при этом вы должны быть залогинены в свой google-аккаунт.

Жмем продолжить и ждем пока появится эта страница:

Вводим название своего ключа и домен, на котором он будет использоваться и жмем Получить, после этого во всплывающем окне появляется наш ключ, например:

— это измененный мой ключ, так что не используйте его.

Часть вторая. Самая интересная. Добавляем ключ к скрипту maps.google.com

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

Я просто искал в исходном коде страницы упоминания о google, там были скрипты со шрифтами, но нужны api карт, вот нашел такой скрипт:

Теперь ищу его в шаблоне.
В шаблоне Fortuna нашлось 2 упоминания этого скрипта, он подключается в шорткодах, а так же на странице с шаблоном Контакты:

Чтобы указать ключ в запросе, добавьте его как значение параметра key.
Пример:

Теперь добавляю полученный API в свои файлы, получаю такой вид:

И Google Maps работают на Вашем сайте:

Рекомендую к прочтению:

Комментарии (77) к “На премиумных шаблонах перестали работать карты Google”

Николай

Доброго времени, Денис! У меня стоит тема BeTheme. В коде нашел скрипт для ключа. Только дело в том, что он отличается от тех, которые я уже видел у других вебмастеров. Как объяснил мне один из них — просто этот код по разному выглядит при вызове его из разных доменов Гугла. Так вот, мой код выглядит так:

wp_enqueue_script( ‘google-maps’, ‘http’. mfn_ssl() .’://maps.google.com/maps/api/js’, false, THEME_VERSION, true );

Вопрос: где в этот код мне нужно вписать параметр кеу, чтобы у меня стали отображаться карты?

Denis Creative

Попробуйте так:
wp_enqueue_script( ‘google-maps’, ‘http’. mfn_ssl() .’://maps.google.com/maps/api/js?key=YOUR_API_KEY’, false, THEME_VERSION, true );

Николай

Denis Creative

Николай, как успехи? Получилось?)

Николай

Доброго времени, Денис!
Сделал, всё работает: _http://slater.su/севастополь
Спасибо Вам огромное!
Насколько я понял, Вы специализируетесь по ВП? Ежели чего, можно к Вам обращаться за советом?
Кстати, вопрос к Вам, как к разработчику сайтов на ВП — на сколько оцените сайт, который я сделал (ссылка выше)?

Denis Creative

Я не на все вопросы знаю ответы и часто занят по времени, но где-то могу что-то и подсказать, если знаю.
По сайту некоторые моменты я бы сделал по другому;)
Немного странное сочетание цвета в левом меню — коричневый и зеленый, и я всегда ЧПУ настраиваю на латиницу, кириллицу не люблю за такие адреса при копировании
_http://slater.su/%D1%81%D0%B5%D0%B2%D0%B0%D1%81%D1%82%D0%BE%D0%BF%D0%BE%D0%BB%D1%8C
А так, вроде бы норм.

Николай, где в BeTheme нашли код скрипта?

Михаил

А как искать этот файл в котором надо сделать исправление? У меня похожая ситуация, только плагин с картой в админке WP используется для аналитических целей. Никак не могу понять где править (

Михаил

Нашел все таки в плагине. Спасибо за наводку

Марина

Здравствуйте! Возникла такая проблема первый раз( Ключ получила,но не пойму где именно его вставлять. Можете подсказать пожалуйста? Сайт на Joomla

Вот какие строчки выдал поиск по файлам —

$onload .= «script.src = ‘<$scheme>://maps.googleapis.com/maps/api/js?key=<$key>&sensor=<$sensor>&callback=<$asynccallback>‘;»;
Line 607: $output = «»;
Line 677: $url = ‘http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=’ . urlencode($address);
C:\WebServers\home\localhost\www\tdk\plugins\system\helix\shortcodes\map.php (1 hits)
Line 23: Helix::addShortcodeScript(‘https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true’, ‘,’, false);
C:\WebServers\home\localhost\www\tdk\templates\shaper_corporex\shortcodes\map.php (1 hits)
Line 23: Helix::addShortcodeScript(‘https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true’, ‘,’, false);

Denis Creative

Судя по этому key= <$key>— у Вас в шаблоне где-то есть поле в которое можно ввести ключ API Google через админку, не трогая код.

Мурат

Доброго времени Денис. У меня такая же проблема с картой на сайте. Помогите с кодом, нашел на сайте вот такой код:
wp_enqueue_script( ‘googlemap’,’https://maps.googleapis.com/maps/api/js’, array(‘jquery’), ‘1.0’, true);
Делаю как у вас, мой пример:
wp_enqueue_script( ‘googlemap’,’https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY’, array(‘jquery’), ‘1.0’, true);
Но ситуация такая же, пишет ошибку. Благодарю за ответ заранее.

Denis Creative

Мурат

Денис доброе утро, но проблема не исчезла. Получил код и вписал его в функции темы (functions.php)
в этой строке
wp_enqueue_script( ‘googlemap’,’https://maps.googleapis.com/maps/api/js?key=AIzaSyDtv6DUEkRtuqSig94hqqGLrU11gG_Wn10′, array(‘jquery’), ‘1.0’, true);
Может быть нужно сделать еще? подскажи пож-та

Denis Creative

А дайте ссылку на страницу посмотреть, и попробуйте CTRL + F5, чтобы очистить кеш.

Мурат

Обновил кэш)) Спасибо

Мурат

Денис доброго времени суток, у меня опять проблема возникла с еще одним сайтом по карте, но здесь пробовал все, но карта не показывается. Выходит та же ошибка. Вопрос: где в этот код мне нужно вписать параметр кеу, чтобы у меня стали отображаться карта?
wp_register_script( ‘googlemap’, ‘http://maps.google.com/maps/api/js?sensor=false’, ‘1.8’, true );

Ставил после знака «?», но не выходит. Подскажи пож-та

Denis Creative

Такой вариант не работает?
wp_register_script( ‘googlemap’, ‘http://maps.google.com/maps/api/js?key=123abc’, ‘1.8’, true );

где 123abc — это ваш ключ.

Привет, Денис. Похожая проблема, но ситуация такая: Использую шаблон Explorable и по инструкции в админке должно быть поле для ввода api (в официальной инструкции так говорится) но я его не нашел. С помощью поиска выявил что нужные строки лежат в файле functions.php
wp_enqueue_script( ‘google-maps-api-admin’, ‘http://maps.google.com/maps/api/js?sensor=false&?key=AIzaSyC0cOvywyRcyvJL43-linMTfqcgtmKazB8’, array( ‘jquery’ ), ‘1.0’, true );
и
wp_enqueue_script( ‘explorable-google-maps-api’, is_ssl() ? ‘https://maps-api-ssl.google.com/maps/api/js?sensor=false&?key=AIzaSyC0cOvywyRcyvJL43-linMTfqcgtmKazB8’ : ‘http://maps.google.com/maps/api/js?sensor=false&?key=AIzaSyC0cOvywyRcyvJL43-linMTfqcgtmKazB8 ‘, array( ‘jquery’ ), ‘1.0’, false );

Но все равно не заработала карта. В месте где должна быть карта текст «Ошибка
При загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли JavaScript.»

Denis Creative

Было что-то похожее, почему-то не срабатывал скрипт и начинал работать только после удаления ?sensor=false& . Попробуйте, может и Вам поможет.

Роман

Блин все перепробовал не фига карта не появляется ПОМОГИТЕ

Был такой код $google_maps_json_url = ( is_ssl() ? ‘https’ : ‘http’ ) . ‘://maps.googleapis.com/maps/api/geocode/json’;
прописал- //maps.googleapis.com/maps/api/geocode/json?key=тут свой код’
убрал ?sensor=false&
все рано карта не выходит
может еще файле каком прописать нужно
3 часа лазил не нашел больше не где на карты гугл переходов
прошу подсказку

Denis Creative

1. Попробуйте CTRL + F5.
2. Попробуйте заменить код на этот:
//maps.google.com/maps/api/js?key=тут свой код’
3. Или сбросьте ссылку на сайт через почту, чтобы посмотреть подробнее.

Роман

на полсекунды появляется и сбрасывает

Роман

Попробовал не помогает
сейчас ссылку через почту скину посмотри будь любезен без карты вид сырой прям

Роман

Хочу искренне поблагодарить Denis Creative помог совершенно бескорыстно разобраться с этой картой. У меня в шаблоне на гугл мар 4 запроса было в 2 файлах. Я только одну строку менял чуть с ума не сошел, потом Denis Creative направил в нужную сторону, я в остальных строках свой кей дописал и заработала
УРА! товарищи УРА!

Не могу найти в коде в каком файле нужно делать правки, не могли бы Вы посмотреть?

Denis Creative

Скорее всего в файле functions.php или каком-то файле подключаемом в functions.php.
Попробуйте поискать по всем файлам шаблона через Notepad++ фразу maps.googleapis.com/maps/api

Спасибо за совет, нашел в одном месте, добавил ключ, получилась такая строка $map_api = ‘http’ . ( ( is_ssl() ) ? ‘s’ : » ) . ‘://maps.googleapis.com/maps/api/js?key=AIzaSyB48DHPl7a0L2hS-oPEvbqqiMvxjBJ6zE8’ . substr( get_locale(), 0, 2 );
но вот изменений не наступило, кэш чистил, в другом браузере смотрел

Denis Creative

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

Или попробуйте такой вариант:
$map_api = ‘http’ . ( ( is_ssl() ) ? ‘s’ : » ) . ‘://maps.googleapis.com/maps/api/js?key=AIzaSyB48DHPl7a0L2hS-oPEvbqqiMvxjBJ6zE8’;

Изначально было так $map_api = ‘http’ . ( ( is_ssl() ) ? ‘s’ : » ) . ‘://maps.googleapis.com/maps/api/js?language=’ . substr( get_locale(), 0, 2 );

Полная секция такая if ( ! Avada()->settings->get( ‘status_gmap’ ) ) <
$map_api = ‘http’ . ( ( is_ssl() ) ? ‘s’ : » ) . ‘://maps.googleapis.com/maps/api/js?language=’ . substr( get_locale(), 0, 2 );
wp_register_script( ‘google-maps-api’, $map_api, array(), $theme_info->get( ‘Version’ ), false );
wp_register_script( ‘google-maps-infobox’, ‘http’ . ( ( is_ssl() ) ? ‘s’ : » ) . ‘://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js’, array(), $theme_info->get( ‘Version’ ), false );
>

Denis Creative

Вы не пробовали этот вариант?
$map_api = ‘http’ . ( ( is_ssl() ) ? ‘s’ : » ) . ‘://maps.googleapis.com/maps/api/js?key=AIzaSyB48DHPl7a0L2hS-oPEvbqqiMvxjBJ6zE8’;

или такой:
$map_api = ‘http’ . ( ( is_ssl() ) ? ‘s’ : » ) . ‘://maps.googleapis.com/maps/api/js?key=AIzaSyB48DHPl7a0L2hS-oPEvbqqiMvxjBJ6zE8&?language=’ . substr( get_locale(), 0, 2 );

Спасибо большое, последний вариант оказался рабочим!

Сергей

Спасибо! Что бы я без тебя делал чувак! 🙂

Дмитрий

проблема с сайтом
тема repairpress в коде шаблона (functions.php) нашел вот такую строчку — но как ее исправить под себя? и правильная она вообще?
// google maps
wp_register_script( ‘repairpress-gmaps’, RepairPressHelpers::get_google_maps_api_url(), array(), null, true);

Denis Creative

Править нужно в другом месте, ищите, я так не подскажу.

Никита

Здравстуйте! У меня аналогичная проблема, api key я добавил через функцию «настроить» в моей теме (премиум wp шаблон) это предусмотрено, карты на сайте работают, но если заходишь редактировать страницу, непосредственно в wordpress карты с ошибкой (При загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли JavaScript.) Искал везде по файлам типа — functions.php, нигде ничего нет! Может, подскажете где поискать, что исправить! Заранее спасибо!

Александр

Добрый день. Прошу помочь. Сам не могу разобраться. Нашел через Notepad++ фразу maps.googleapis.com/maps/api . Куда вставлять кулюч не могу понять. Вот такой у меня код:
$.getScript(‘https://maps.googleapis.com/maps/api/js?v=3.exp&callback=Ottavio.gmaps’)

Denis Creative

Попробуйте так:
$.getScript(‘https://maps.googleapis.com/maps/api/js?key=AIzabyC2Yoh_d1l9AZ7GUp5rP_avurGrYuHb3YM&callback=Ottavio.gmaps’)
или так:
$.getScript(‘https://maps.googleapis.com/maps/api/js?key=AIzabyC2Yoh_d1l9AZ7GUp5rP_avurGrYuHb3YM’)
где
AIzabyC2Yoh_d1l9AZ7GUp5rP_avurGrYuHb3YM — это Ваш ключ

Александр

Огромно Спасибо! Первый вариант заработал.

Артем

Здравствуйте! Совсем уже голову сломал. Вот сайт — servis-abs.ru.

Во всех файлах notepad нашёл только это в файkе main.js

и это в файле index.html

Менял и так и сяк, ну ничего не получается.

Может это другой случай?

Denis Creative

Получилось решить проблему?

Артем

не могу скинуть код…

Denis Creative

Код нужно оборачивать в тег

Дмитрий

Спасибо этому автору! без этой статьи даже и не знал бы что делать! Большая благодарность!

Радмир

В приложении MEMU всплывает окно с надписью Ошибка. При загрузке гугл карт на этой странице возникла проблема. Подробности в консоли Java script. Прошу помочь с решением

Denis Creative

К сожалению, не знаю, что это за приложение, но вероятно, нужно получить для него ключ API для Google Maps.

павел

добрый день, может подскажите.
есть шаблон villareal, в нем есть пункт для api google maps, есть полученный ключ, домен подтвержден, но карты не работают!
в коде тоже не нашел ничего с гугл апи
что можете сказать? вот сайт byhome.by

Denis Creative

Ключ не активирован.
Ошибка — ApiNotActivatedMapError.
Решение — Google Maps JavaScript API не активирован для вашего проекта API. Возможно вам потребуется включить Google Maps JavaScript API в разделе API из Google API Console.

Павел

Огромное спасибо Денису! День разбирался, а он взял и помог за пару минут!! Это лучший специалист, которого я знаю!

Дмитрий

Привет)Помоги пожалуйста никак не могу настроить карту гугл.

Denis Creative

Чем я могу помочь?

Евгений

Поиск по файлам дал такой результат. Это шаблон от джумлы 3.х. Помогите пожалуйста. что к чему?

Евгений

файл шаблона gk.scripts.js

Denis Creative

Судя по key= <$key>у вас в админке есть поле для ввода ключа.
Код шаблона можно не трогать.

Евгений

Вставка ключа не помогает. Шаблон joomla gk_stekhaus

Denis Creative

Вариантов проблемы много, как минимум нужно посмотреть какие ошибки в консоли на странице.

Евгений

В консоле ошибки:
Google maps api error: missingkeymaperror
Google maps Api warning: noapikeys
Хотя плагин установлен. И ключ введен.

Denis Creative

А в исходном коде ключ где-то видно?

Евгений

в самом модуле так:

а на сайте если смотреть исходный код. то вот так:
ОшибкаПри загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли JavaScript.

Мария

Здравствуйте, Денис!
Помогите, пожалуйста, разобраться! Не могу понять куда вставлять API код.

Уже везде вставляла, карта не работает (((

Denis Creative

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

Мария

Спасибо большое, что так оперативно ответили!
С ошибкой разобралась, все заработало )))

Евгений

в самом модуле так:

а на сайте в исходном коде так:
ОшибкаПри загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли JavaScript.

Denis Creative

ссылку на сайт сложно показать?

Евгений

Denis Creative

https://www.fl.ru/ — найдите здесь фрилансера.
Нужно разбираться, смотреть, куда вы вводите ключ, где он выводится или почему он не выводится.

Эдуард

Здравствуйте! Проблема с ключом. Добавляю в скрипт, не хочет.

Ошибка
При загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли JavaScript.

Подскажите где ошибка!?

Файл index.html скрипт:

Denis Creative

Если вы правильно добавил ключ, то ошибок не должно быть, проверьте, правильно ли прописан ключ . api/js?key=

Очень вам благодарна за информацию по настройке ключа для карт!!

Denis Creative

Я рад, когда информация с моего сайта полезна кому-то кроме меня))

Евгений

Для некоторых шаблонов помогает плагин API KEY for Google Maps. В настройках плагина вставляете ключ.

Павел

Добрый день!
Увидел Вашу статью и обрадовался, но увы у меня все равно не работает(((( Может сможете подсказать?
Сайт mskmoyka.ru/contacts/ на данной странице не работает, карта вставлена шорткодом. А на главной все работает, там другой плагин map list pro.
Я не большой специалист по WP, надеюсь вы сможете подсказать. Файлы поправил как вы сказали, поиском через Тотол командер нашел файлы где есть api google map, прописал ключ, НЕ помогло, установил плагин API KEY for Google Maps увы тоже не помогло.

Denis Creative

В консоли указана ошибка, что не установлен ключ API, по идее, плагин API KEY for Google Maps должен помочь, он должен выводить ключ на всех страницах.

Сергей

Как переточить с гугла на яндекс карты

Сергей

Здравствуйте. Ключ АПИ получил, но вставляя его в код, все равно не работает карта, да и код у меня сильно отличается

Источник