Не работает google maps api

Проблема с Google Maps JavaScript API

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

Проблема на фронтенде отображалась вот так:

Сама ошибка рекомендовала зайти в консоль и посмотреть ошибку через неё. Вот что мы там видим:

Собственно, здесь рассказывается история про ошибку взаимодействия с API, а если быть точным, то оно не активно. Что же мы делаем? Мы идём, и создаём Google Api Key.

Создание ключа происходит на этой странице:
https://developers.google.com/maps/documentation/javascript/get-api-key

После нажатия на кнопку «GET A KEY» создаём новый проект, называем его понятным названием и получаем ключ.

Так как у нас всё уже встроено в шаблон и по условию функции определяется введён ключ в поле или нет, вроде как бы мы ничего здесь больше не должны делать и всё должно работать. Однако не работает.

Здесь ссылка начинается на слэш. Изначально ссылка выглядела как https://, но так как

• наш сайт работает через ssl-протокол,
• запрос до скрипта api’шного идёт на https,

я люблю убирать такие вхождения. Это моё личное задротство, поэтому не обращайте внимания. 😀 Аналогичные отношения у меня и с utm-метками. Если я вижу такие добавления к ссылкам, я это удаляю. 😀

Библиотека API от Google содержит кучу-кучу-кучу апишных библиотек на все случаи жизни. И даже что касается карт, там можно найти несколько библиотек, которые не знающего человека собъют с толка.

Я перетыкал несколько. Потому что в час ночи не всегда мозг можно удачно включить. В это время он обычно выключается. Мой случай — Google Maps JavaScript API.

И это всё Google Maps API:

Каждая библиотека включается и выключается отдельно:

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

Как использовать ключ API

Чтобы использовать этот API, нужен ключ. Он позволяет идентифицировать проект и определить его квоты и параметры доступа. Получить ключ API можно на странице «Учетные данные». Обратите внимание, что для каждой платформы, например Android или iOS, нужен отдельный ключ.

У меня всё заработало и это отобразилось на графике трафика и ошибок:

Ну и собственно, можно обновлять страницу сайта с картой Google Maps и любоваться картой, которая снова работает!

Знать что такое API и работать с этими библиотеками является очень хорошим программистским навыком. Всегда хотел научиться, тем более что ничего там особо сложного нет. Документация к каждой библиотеке своя, но принцип работы похож.

Настроить взаимодействие стороннего api с вашим проектом в сети даст большое преимущество перед другими середнячками.

Источник

Как исправить ошибки в Google Maps Javascript API 3 mobile

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

Весь секрет в function loadScript() а также в window.onload который нужно разместить именно ЗА $.mobile.changePage. new google.maps.LatLng — не забываем именно так написать, потому как по другому гугл не поймет что вы от него вообще хочете(изменения для работы с javascript google api v3). Как вы заметили я 2 раза написал window.onload, хотя функция должна выполнятся 1 раз, но при работе с гугл картами почему-то именно 2 раза window.onload спасли меня, не знаю в чем дело, но работает!

Еще один момент, не знаю почему, но при определении размеров div`а в % тоже идет не корректное отображение, решение данной проблемы очень тривиально и просто

Где map_canvas — контейнер в котором отображается наша карта.

Следующая проблема связана с геолокацией гугла, таже проблема, прорисовка карты, ниже привожу полный пример с решением

Решение данной проблемы в этих строках

и опять же нельзя задавать высоту div`а где будет отображаться ваша карта в %.

Это рекомендации которые помогли настроить одинаковое отображение как на планшетных/мобильных так и на стационарных устройствах. Хотя в офф. документации к Javascript google API 3 написаны все примеры с размерами в %, на деле же — головная боль.

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

Начальник подсказал интересное решение, на практике помогло, код ниже

и блок карты с обязательным классом

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

Источник

На премиумных шаблонах перестали работать карты 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 должен помочь, он должен выводить ключ на всех страницах.

Сергей

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

Сергей

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

Источник