Google maps javascript api error referernotallowedmaperror

На этой странице описаны сообщения об ошибках, возвращаемые Maps JavaScript API. Этот API записывает сообщения об ошибках и предупреждения в Консоль JavaScript. Некоторые ошибки могут приводить к показу затемненной карты с водяными знаками.

Ошибки, связанные с оплатой и ключом API

Как устранить

Иногда карты могут отображаться затемненными, а панорамы Просмотра улиц – в негативе, с водяными знаками с текстом «for development purposes only» (только для целей разработки). Чаще всего такая проблема связана с ключом API или оплатой. Сервисами платформы Google Карт можно пользоваться, только если в вашем аккаунте активированы платежные функции, а в запросах к API указан действительный ключ. Подробнее читайте в разделе Проверка ошибок в браузере.

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

Коды ошибок Maps JavaScript API (для разработчиков и владельцев сайтов)

В следующей таблице приведен список кодов ошибок, которые возвращает Maps JavaScript API, с описанием их причины и способом устранения.
Как посмотреть в браузере сообщения об ошибках…

Ошибки загрузки карты

В следующей таблице приведены коды ошибок Maps JavaScript API и пояснения к ним.

Коды ошибок Maps JavaScript API

Пояснения к ошибкам в Консоли JavaScript браузера Chrome, веб-консоли Firefox и других аналогичных инструментах браузера ищите в таблице ниже.

Maps JavaScript API возвращает как ошибки, так и предупреждения.
Ошибка указывает на возникновение серьезной проблемы при загрузке Maps JavaScript API. Например, ошибка – это когда API не может быть корректно загружен на страницу и не работает на ней.
Предупреждение – это дополнительная информация о загрузке Maps JavaScript API. Она описывает возможные причины ошибки или проблемы с кодом, который загружает Maps JavaScript API.
Если вы получаете только предупреждения, но не сообщения об ошибках, API на странице будет работать. Тем не менее мы рекомендуем устранять и потенциальные проблемы.

Проверка ошибок в браузере

Maps JavaScript API записывает сообщения об ошибках в window.console. В этом разделе мы рассказываем, как проверить выходные данные window.console в Google Chrome. Если вы используете другой браузер, обратитесь к его документации для разработчиков. Ниже даны ссылки на инструменты, с помощью которых можно проверить выходные данные window.console в некоторых других браузерах:

• Консоль Internet Explorer
• Веб-консоль Firefox
• Удаленная отладка в Android
• Веб-инспектор iOS

Вот как использовать консоль JavaScript для проверки выходных данных window.console в Chrome:

1. Откройте инструменты разработчика (нажмите на значок меню > Другие инструменты > Инструменты разработчика).
2. Чтобы открыть консоль JavaScript, нажмите клавишу ESC на клавиатуре.
   Клавиша ESC переключит в режим консоли JavaScript. Если вы закроете консоль, еще раз нажмите ESC, чтобы открыть ее.

Если при загрузке Maps JavaScript API возникнут ошибки или предупреждения, они сохранятся на консоли в виде строк.
Сообщение об ошибке или предупреждение имеют следующий формат:

Google Maps API error: [ERROR CODE] [Link to API document]

или

Google Maps API warning: [ERROR CODE] [Link to API document]

Чтобы понять код ошибки, найдите его в этой таблице. Кроме того, в сообщении об ошибке будет ссылка на документацию с ее описанием.

Примечание. Прослушивать ошибки аутентификации можно программно.

Работа с неподдерживаемыми браузерами

Проверьте, поддерживает ли Maps JavaScript API используемая вами версия браузера.

• Если вы пользуетесь браузером Internet Explorer (IE), обновите его до последней версии. Поскольку старые версии IE не поддерживаются, вы также можете использовать вместо них любой альтернативный поддерживаемый браузер.
• Если вы разрабатываете нативное приложение для Windows WebView в поддерживаемой версии браузера Internet Explorer, вполне вероятно, что этот браузер будет переходить в режим, в котором браузером по умолчанию станет Internet Explorer 7. Переопределить такое поведение по умолчанию можно одним из следующих способов:
• Задайте режим совместимости с помощью значения IE X-UA-Compatible в заголовке объекта meta (рекомендуемый способ).

  <meta http-equiv="x-ua-compatible" content="IE=edge">

• Обновите реестр, чтобы использовать специальные ключи для приложения (FEATURE_BROWSER_EMULATION).

Если ваш код по-прежнему не работает

Чтобы помочь вам справиться с наиболее распространенными ошибками, Брендан Кенни и Мано Маркс записали для вас это видео. Вот что они советуют:

• Ищите опечатки. Помните, что в языке JavaScript учитывается регистр.
• Не забывайте об основах! Некоторые распространенные проблемы возникают еще на начальном этапе создания карты. Например:
  • заданы ли свойства zoom и center;
  • объявлен ли элемент div, в котором карта будет отображаться на экране;
  • задана ли для элемента div высота на экране. По умолчанию элементы div создаются с высотой 0 и поэтому не отображаются на экране.

  Изучите примеры по программированию ссылок.

• В инструментах разработчика Chrome предусмотрен отладчик JavaScript, помогающий выявлять проблемы. Начните поиск ошибок с консоли JavaScript.
• Задавайте вопросы на форуме Stack Overflow. Пользуйтесь инструкциями и советами на странице Поддержка.

This page didn’t load Google Maps correctly. See the JavaScript console for technical details. If you are facing this same issue with your website then don’t worry I am going to break down, how to fix it.

This error has become more common since Google Maps started requiring an API key. If you started using Google Maps on your website or after June 22nd, 2016 then you will need to sign up for Google Cloud and implement an API key.

I divide this post into several steps you have to follow all the required steps in order to fix the “This page didn’t load Google Maps correctly. See the javascript console for technical details.” issue.

Step: 1

Why “This page didn’t load Google Maps correctly. See the JavaScript console for technical details.” error occurred.

The most common reason is you are not using APIs but it’s not the cause for all of you that’s why we together first get the particular reason why this error occurred. To get the reason you have to follow these steps.

1. As the error says, “See the JavaScript console for technical details.”
2. Open JavaScript console.

1. If your console looks the same as in the below image then your error is MissingKeyMapError.

1. If your console looks the same as in the below image then your error is RefererNotAllowedMapError.

1. If your console looks the same as in the below image then your error is ApiNotActivatedMapError.

1. If your console looks the same as in the below image then your error is InvalidKeyMapError.

1. If your console does not match any of our errors then you have to see the Google Maps API Error Messages documentation.

Go to step 2 and fix your particular error.

Step: 2

Fix “This page didn’t load Google Maps correctly. See the JavaScript console for technical details.” error.

How to Fix MissingKeyMapError

MissingKeyMapError means you are not using an API key and will need to sign up for one then configure your website to use it. Websites that started using Google Maps on or after June 22, 2016, require an API key.

Follow these steps in order to fix MissingKeyMapError.

1. Go to the Google Maps Platform.
2. Click Get Started.

1. Google will ask you for some information. If it asks you to create a project, go ahead and do that (no worries if not). You must add a payment method even though Google gives you a very large amount of free credits every month. To date, none of our customers have reported needing to pay anything for Google Maps.
2. You will then be asked to choose products. Choose Maps then click Enable then answer the short survey.

1. API key will be generated and shown. Copy it to your clipboard with the button on the right then click on “Done”.

1. Go to Geolocation API then click Enable.

1. Now click on Credentials from the menu.

1. Click your “Maps API Key” and select HTTP referrers under Application restrictions.

1. Under Website restrictions, use ADD AN ITEM twice to add the two entries below (replacing yourname.com with your own domain).

yourname.com/*
*.yourname.com/*

1. Click Save at the bottom and you’re done.
2. Use your API key that you copied in step 5.

How to Fix RefererNotAllowedMapError

RefererNotAllowedMapError is the most common error we’ve seen apart from not using an API key. The console will also say, “Your site URL to be authorized”.

Follow these steps in order to fix RefererNotAllowedMapError.

1. Go to https://console.developers.google.com/apis/credentials
2. Click your API key’s name to edit its settings.
3. Under Application restrictions, make sure “HTTP referrers (web sites)” is selected and that you have added the two entries below (replacing yourname.com with your own domain). Both are necessary and be sure that have you appended /* to the end.

yourname.com/*
*.yourname.com/*

1. Click the Save button then wait a few minutes for the change to take effect (Google says it can take up to 5 minutes).

Tip: If you have multiple projects, make sure you are working with the correct one by using the dropdown at the top.

How to Fix ApiNotActivatedMapError

Google Maps has more than a dozen different APIs. That’s a lot! The Google Maps JavaScript API is the most popular. Whichever API you are using, it’s possible that it is not enabled in your account. Let’s fix the ApiNotActivatedMapError error by enabling the API you’re using.

Follow these steps in order to fix ApiNotActivatedMapError.

1. Go to https://console.developers.google.com/apis/library
2. Search for APIs that you are using.

1. Click the API you’re using.

1. Click the Enable button at the top.

How to Fix InvalidKeyMapError

InvalidKeyMapError simply means the key you implemented is wrong. In other words, you created it but did not enter it into your website correctly.

Follow these steps in order to fix InvalidKeyMapError.

1. Go to https://console.developers.google.com/apis/credentials
2. Copy your key.

1. Past your Key.

How to Fix Other Errors

As I already mentioned, I recommend you to see the Google Maps API Error Messages documentation.

It’s Still Not Working

Here are some points you have to check if you are still seeing the “This page didn’t load Google Maps correctly” error.

1. Wait five minutes. Google says it can take up to five minutes for the changes to take effect.
2. Check the console again. Revisit the section above on identifying the cause of the error. It is possible that you had two errors to begin with but only solved one or that the one error remains because you did not tweak the settings correctly.
3. Clear your cache. If you’re using a caching plugin, purge it’s cache. Otherwise, your key might not be used right away. It doesn’t hurt to clear your browser cache either.

In one of the projects I needed to use Google Maps JavaScript API Places Autocomplete widget. Although I have used it before, I discovered a few gotchas while setting up a Google Cloud Platform account.

On May 2, 2018 Google announced changes to the Google Maps platform. Beginning June 11, you will need a valid API key and a Google Cloud Platform billing account to access core Google Maps products.

To start using Google Maps JavaScript API please follow the instructions in the official documentation.

According to the best practices to secure an API key it is strongly recommended to enable application and API restrictions.

Google Maps API error: RefererNotAllowedMapError

Problem

I was getting the following message in the console.

Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: http://www.website.com/page-that-has-google-map

Cause

According to the link in the error message:

The current URL loading the Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google Cloud Platform Console.

The most obvious cause for this message is that the page where Google Maps API is used (for example, http://www.website.com/page-that-has-google-map) is not listed in the list of allowed referrers.

Another undocumented cause of this error is that used API is not listed in the list of allowed API. In my example I needed to use Places Autocomplete widget and enabled Places API only. Thanks to this answer on StackOverflow I discovered that only Maps JavaScript API needs to be selected for Places Autocomplete widget to work.

In case with Places Autocomplete widget, what adds to the confusion is that on API Libraries page for your project, both Maps JavaScript API and Places API need to be enabled. But when restricting use of API key, only Maps JavaScript API needs to be selected.

Solution

• Make sure your site and/or page is allowed by Application restrictions.
• Make sure correct API (Maps JavaScript API) is listed in the API restrictions section.

Loading the Maps JavaScript API

Maps JavaScript API can be loaded synchronously and asynchronously with latter being preferred, see official documentation. Asynchronous loading will allow your page to load faster but you need to be able to specify callback method in URL.

Asynchronous loading

<body>
   <div id="map"></div>
   <script>
      var map;
      function initMap() {
         map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
         zoom: 8
         });
      }
   </script>
   <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>

Synchronous loading

<body>
   <div id="map"></div>
   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
   <script>
      var map;
      function initMap() {
         map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
         zoom: 8
         });
      }

      google.maps.event.addDomListener(window, 'load', initMap);
   </script>
</body>

In my project I needed to initialize Places Autocomplete widget when DOM content is loaded using jQuery ready() method. I decided to use synchronous loading method, but in this case Places Autocomplete widget was not initializing every time, only on full page reload.

Problem

<body>
   <div id="map"></div>
   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
   <script>
      $(document).ready(function(){
         var map;
         function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
               center: {lat: -34.397, lng: 150.644},
               zoom: 8
            });
         }

         google.maps.event.addDomListener(window, 'load', initMap);
      });
   </script>
</body>

It turns out, load event on subsequent reloads when all content was cached by the browser was occurring before callback specified in jQuery ready() method.

According to the note in jQuery ready() method documentation:

Note that although the DOM always becomes ready before the page is fully loaded, it is usually not safe to attach a load event listener in code executed during a .ready() handler.

I am currently using the following workaround.

Solution

<body>
   <div id="map"></div>
   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
   <script>
      $(document).ready(function(){
         var map;
         function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
               center: {lat: -34.397, lng: 150.644},
               zoom: 8
            });
         }

         // If document is not fully loaded
         if(document.readyState !== 'complete'){
            // Handle document load event
            window.addEventListener('load', function(){ initMap(); });

         // Otherwise, if document is fully loaded
         } else {
            initMap();
         }
      });
   </script>
</body>

Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.