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

30.07.2016

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

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

При этом консоль ошибок отправляет нас на страницу
https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error,
где описана ошибка MissingKeyMapError.

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

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

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

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

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

na-premiumnyh-shablonah-perestali-rabotat-karty-google-4

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

 AIzabyC2Yoh_d1l9AZ7GUp5rP_avurGrYuHb3YM 

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

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

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

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

<script type='text/javascript' src='//maps.google.com/maps/api/js?sensor=false'></script>

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

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

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

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

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

...
... maps.google.com/maps/api/js?sensor=false&?key=AIzabyC2Yoh_d1l9AZ7GUp5rP_avurGrYuHb3YM
...
... maps.google.com/maps/api/js?key=AIzabyC2Yoh_d1l9AZ7GUp5rP_avurGrYuHb3YM

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

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

Не уходи, пока не прочитаешь:

Комментарии (45) к “На премиумных шаблонах перестали работать карты 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);
    Но ситуация такая же, пишет ошибку. Благодарю за ответ заранее.

    Ответить
  • Мурат

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

    Ответить
  • Мурат

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

    Ответить
  • Мурат

    Денис доброго времени суток, у меня опять проблема возникла с еще одним сайтом по карте, но здесь пробовал все, но карта не показывается. Выходит та же ошибка. Вопрос: где в этот код мне нужно вписать параметр кеу, чтобы у меня стали отображаться карта?
    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);

    Ответить
  • Никита

    Здравстуйте! У меня аналогичная проблема, 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

    var google_map = «»;

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

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

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

    Ответить
  • Артем

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

    Ответить
  • Дмитрий

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

    Ответить

Оставить комментарий