На премиумных шаблонах перестали работать карты 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 работают на Вашем сайте

Полезная инфа:

Комментарии (74) к “На премиумных шаблонах перестали работать карты 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

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

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

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

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

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

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

    Ответить
  • Радмир

    В приложении 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.

      Ответить
  • Павел

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

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

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

    Ответить
  • Евгений

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

    $onload .= "script.src = '{$scheme}://maps.googleapis.com/maps/api/js?key={$key}&sensor={$sensor}&callback={$asynccallback}';";
    $output = "";
    $url = 'http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=' . urlencode($address);
    
    Ответить
    • Евгений

      файл maps.php

      $onload .= "script.src = '{$scheme}://maps.googleapis.com/maps/api/js?key={$key}&sensor={$sensor}&callback={$asynccallback}';";
      $output = "";
      $url = 'http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=' . urlencode($address);
      

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

      jQuery.getScript("https://maps.googleapis.com/maps/api/js?v=3.exp&callback=gkMapInitialize")
      
      Ответить
      • Denis Creative

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

        Ответить
        • Евгений

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

          Ответить
          • Denis Creative

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

        • Евгений

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

          Ответить
        • Евгений

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

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

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

    if ( ! function_exists('wp_rem_cs_enqueue_google_map') ) {
    
            function wp_rem_cs_enqueue_google_map($google_api = '') {
                $google_api_key = '';
                if ( isset($google_api) &amp;&amp; $google_api != '' ) {
                    $google_api_key = '?key=' . $google_api . '&amp;libraries=places,drawing';
                } else {
                   $google_api_key = '?libraries=geometry,places,drawing';
                }
               wp_register_script('wp-rem-google-map-api', 'https://maps.googleapis.com/maps/api/js' . $google_api_key); 
            }
    

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

    Ответить
    • Denis Creative

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

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

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

    Ответить
  • Евгений

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

    Ответить
  • Эдуард

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

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

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

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

    Ответить
    • Denis Creative

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

      Ответить
  • Lira

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

    Ответить
  • Евгений

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

      Ответить

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