We’re trying to develop an geoplacement app for one of our clients, and we want first to test it in out own domain.
We have signed for Google Maps JavaScript API, and we have a valid browser key and our domain, www.grupocamaleon.com, has been authorized to use that key.
But we can’t make even the easiest example to run without error.
We have, in our domain and with our key, the following demo:
(1) http://www.grupocamaleon.com/boceto/aerial-simple.html
But it doesn’t work, and Firebug console says:
«Google Maps API error: Google Maps API error: RefererNotAllowedMapError (link to Google documentation on RefererNotAllowedMapError) Your site URL to be authorized: (1)»
My credential page is missing the possibility of adding referrers to accept, so solutions involving adding referrers are not possible right now.
My credential Page:
Why do we get that error? How can we fix it?
geocodezip
157k13 gold badges218 silver badges242 bronze badges
asked Feb 9, 2016 at 9:28
7
I know this is an old question that already has several answers, but I had this same problem and for me the issue was that I followed the example provided on console.developers.google.com and entered my domains in the format *.domain.tld/*. This didn’t work at all, and I tried adding all kinds of variations to this like domain.tld, domain.tld/*, *.domain.tld etc.
What solved it for me was adding the actual protocol too; http://domain.tld/* is the only one I need for it to work on my site. I guess I’ll need to add https://domain.tld/* if I were to switch to HTTPS.
Update: Google have finally updated the placeholder to include http now:
answered Jul 25, 2016 at 20:49
14
Come on Google, you guys are smarter than the API Credential page lets on. (I know because I have two sons working there.)
The list of «referrers» is far pickier than it lets on. (Of course, it should be more forgiving.) Here are some rules that took me hours to discover:
- The order in the list is important. Moving your URL up in the list may make it work.
- «http://» prefix is required.
- Even «localhost» needs it: «http://localhost/foo/bar.html»
- A trailing
*as a wildcard seems to work as if it is a string compare. - Even with «http://localhost/foo/bar.html», «http://localhost/foo/bar.html?arg=1» will not work. (Will a wildcard help?)
- For both prod dev, have (at least) two rows: «http://localhost/foo/bar.html» and «http://my.site.com/foo/bar.html»
- A port number (8085? 4000?) does not seem to be necessary.
There are probably other rules, but this is a tedious guessing game.
answered May 3, 2018 at 3:20
Rick JamesRick James
131k11 gold badges126 silver badges214 bronze badges
10
Wildcards (asterisks) ARE NOT allowed in the subdomain part.
- WRONG: *.example.com/*
- RIGHT: example.com/*
Forget what Google says on the placeholder, it is not allowed.
answered Dec 26, 2018 at 23:27
3
According to the documentation, ‘RefererNotAllowedMapError’ means
The current URL loading the Google 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 Developers Console.
I have the Google Maps Embed API set up for my own personal/work use and thus far have not specified any HTTP referrers. I register no errors. Your settings must be making Google think the URL you’re visiting is not registered or allowed.
answered Feb 9, 2016 at 9:40
TRoseTRose
1,6901 gold badge15 silver badges32 bronze badges
Just remind that if you just change it, it may take up to 5 minutes for settings to take effect.
answered Jan 7, 2017 at 4:53
Putu DePutu De
1891 silver badge3 bronze badges
I tried many referrer variations and waiting 5 minutes as well until I realized the example Google populates in the form field is flawed. They show:
*.example.com/*
However that only works if you have subdomain. or www. in front of your domain name. The following worked for me immediately (omitting the leading period from Google’s example):
*example.com/*
answered Jan 21, 2017 at 19:21
ow3now3n
5,6544 gold badges51 silver badges51 bronze badges
4
According the google docs
this happened because the url on which you are using the Google Maps API, it not registered in list of allowed referrers
EDIT :
From Google Docs
All subdomains of a specified domain are also authorized.
If http://example.com is authorized, then http://www.example.com is also authorized. The reverse is not true: if http://www.example.com is authorized, http://example.com is not necessarily authorized
So,Please configure http://testdomain.com domain, then your http://www.testdomain.com will start work.
answered Feb 9, 2016 at 9:39
RIYAJ KHANRIYAJ KHAN
14.9k5 gold badges30 silver badges52 bronze badges
2
Check you have the correct APIS enabled as well.
I tried all of the above, asterisks, domain tlds, forward slashes, backslashes and everything, even in the end only entering one url as a last hope.
All of this did not work and finally I realised that Google also requires that you specify now which API’s you want to use (see screenshot)
I did not have ones I needed enabled (for me that was Maps JavaScript API)
Once I enabled it, all worked fine using:
http://www.example.com/*
I hope that helps someone! 
answered Sep 3, 2018 at 12:06
The Problem
Google suggests the format *.example.com/*
This format does not work.
The Solution
Check the browser console for the Google Maps JavaScript API error: RefererNotAllowedMapError
Underneath the error it should have: «Your site URL to be authorized: https://example.com/».
Use that url for the referrer and add a wildcard * to the end of it (https://example.com/*, in this case).
answered Sep 15, 2020 at 10:14
3
I found that even your HTTP Referreres are valid enough, wrong set of API Restrictions causes Google Maps JavaScript API error: RefererNotAllowedMapError.
For example:
- You are using Javascript API for the key.
- Add
http://localhost/*toApplication Restrictions / HTTP Referrences - Choose
Maps Embed APIinstead ofMaps Javascript API - This causes
RefererNotAllowedMapError
answered Jun 5, 2018 at 6:26
hiroshihiroshi
6,7013 gold badges45 silver badges59 bronze badges
2
There are lots of supposed solutions accross several years, and some don’t work any longer and some never did, thus my up-to-date take working per end of July 2018.
Setup:
Google Maps JavaScript API has to work properly with…
- multiple domains calling the API:
example.comandexample.net - arbitrary subdomains:
user22656.example.com, etc. - both secure and standard HTTP protocols:
http://www.example.com/andhttps://example.net/ - indefinite path structure (i.e. a large number of different URL paths)
Solution:
- Actually using the pattern from the placeholder:
<https (or) http>://*.example.com/*. - Not omitting the protocol, but adding two entries per domain (one per protocol).
- An additional entry for subdomains (with a
*.leading the hostname). - I had the feeling that the
RefererNotAllowedMapErrorerror still appeared using the proper configuration (and having waited ample time). I deleted the credential key, repeated the request (now gettingInvalidKeyMapError), created new credentials (using the exact same setup), and it worked ever since. - Adding mere protocol and domain seemed not to have included subdomains.
- For one of the domains, the working configuration looks like this:
(As text:)
Accept requests from these HTTP referrers (web sites)
https://*.example.com/*
https://example.com/*
http://*.example.com/*
http://example.com/*
answered Jul 30, 2018 at 9:22
dakabdakab
5,1998 gold badges42 silver badges64 bronze badges
2
None of these fixes were working for me until I found out that RefererNotAllowedMapError can be caused by not having a billing account linked to the project. So make sure to activate your free trial or whatever.
answered Oct 18, 2018 at 23:53
Owen MasbackOwen Masback
4201 gold badge4 silver badges10 bronze badges
This is another sh1tty Google product with a terrible implemenation.
The problem I have found with this is that if you restrict an API key by IP address, it wont work… BUT far be it from Google to make this point clear… It wasn’t until troubleshooting and researching I found:
API keys with an IP addresses restriction can only be used with web
services that are intended for use from the server side (such as the
Geocoding API and other Web Service APIs). Most of these web services
have equivalent services within the Maps JavaScript API (for example,
see the Geocoding Service). To use the Maps JavaScript API client side
services, you will need to create a separate API key which can be
secured with an HTTP referrers restriction (see Restricting an API
key).
https://developers.google.com/maps/documentation/javascript/error-messages
FFS Google… Pretty important piece of information that would be good to clarify on setup…
answered May 29, 2019 at 6:00
php-b-graderphp-b-grader
3,13811 gold badges41 silver badges53 bronze badges
Accept requests from these HTTP referrers (web sites)
Write localhost directory path
flavio.donze
7,1429 gold badges52 silver badges86 bronze badges
answered Apr 6, 2016 at 9:52
2
I add 2 website domains, set «*» in subdomain is not working but specific subdomain «WWW» and non-subdomain have been worked for my websites using the same Google Map API key.
dont’ use «*» in subdomain
Hope it help.
answered Nov 4, 2018 at 13:26
-
That your billing is enabled
-
That your website has been added to Google Console
-
That your website is added to the referrers in your app.
-
(do a wildcard for both www and none www)
http://www.example.com/* and http://example.com/*
-
That Javascript Maps is enabled and you are using the correct credentials
-
That the website has been added to your DNS to enable your Google Console above.
-
Smile after it works!
answered Mar 29, 2019 at 12:28
MorrisMorris
911 silver badge2 bronze badges
1
Enable billing for Google project fixed the problem.
answered Aug 15, 2020 at 2:31
ahgoodahgood
1,80720 silver badges19 bronze badges
1
you show a screenshot of your api credentials page, but you have to click on «Browser key 1» and go from there to add referrers.
answered Feb 23, 2016 at 22:00
ITwrxITwrx
1143 bronze badges
0
For deeper nested pages
If you have a project in a folder for example or nested pages
http://yourdomain.com/your-folder/your-page you can enter this in
http://yourdomain.com/*/*
The important part being /*/*/* depending how far you need to go
It seems that the * will not match / or get into deeper paths..
This will give your full domain access, well unless you have deeper nesting than that..
answered Aug 31, 2017 at 19:44
RadmationRadmation
1,4561 gold badge13 silver badges28 bronze badges
I struggled to make this work as well, but here are some pointers:
- The URLs set as referrers include
http, e.g.http://example.com/* - Google Maps JavaScript API was enabled
- Billing was set-up on this account
Once all of this above was resolved, the maps displayed as expected.
answered Aug 14, 2019 at 6:57
FMCorzFMCorz
2,4881 gold badge20 silver badges18 bronze badges
I got mine working finally by using this tip from Google:
(https://support.google.com/webmasters/answer/35179)
Here are our definitions of domain and site. These definitions are specific to Search Console verification:
http://example.com/ - A site (because it includes the http:// prefix)
example.com/ - A domain (because it doesn't include a protocol prefix)
puppies.example.com/ - A subdomain of example.com
http://example.com/petstore/ - A subdirectory of http://example.com site
answered Feb 22, 2018 at 20:14
I was attempting to use the Places API (Autocomplete) and had to also enable the Maps Javascript API from within Google Cloud Console before the Places API would work.
answered Aug 27, 2019 at 13:19
bradbrad
1,28715 silver badges32 bronze badges
Removing the restrictions (to None) worked for me.
answered Mar 20, 2017 at 18:39
Robot BoyRobot Boy
1,7861 gold badge16 silver badges17 bronze badges
2
In my experience
http://www.example.com
worked fine
But, https required /* at the end
answered Mar 29, 2019 at 23:43
Chrome’s Javascript console suggested I declare the entire page address in my HTTP referrer list, in this instance http://mywebsite.com/map.htm Even though the exact address is http://www.mywebsite.com/map.htm — I already had wildcard styles listed as suggested by others but this was the only way it would work for me.
answered Apr 4, 2019 at 14:57
This worked for me. There are 2 major categories of restrictions under api key settings:
Application restrictionsAPI restrictions
Application restrictions:
At the bottom in the Referrer section add your website url
» http://www.grupocamaleon.com/boceto/aerial-simple.html » .There are example rules on the right hand side of the section based on various requirements.
API restrictions:
Under API restrictions you have to explicitly select ‘Maps Javascript API’ from the dropdown list since our unique key will only be used for calling the Google maps API(probably) and save it as you can see in the below snap. I hope this works for you…..worked for me
Check your Script:
Also the issue may arise due to improper key feeding inside the script tag. It should be something like:
<script async defer src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
answered Sep 19, 2019 at 5:25
Tahir77667Tahir77667
2,15816 silver badges15 bronze badges
If you are working on localhost then do not include http or https in the url.
Use «localhost» without protocols. I struggled for days and found it working.
answered Sep 16, 2021 at 10:28
Something no one else seems to have mentioned in here that may be important is also this:
Http referrers are case sensitive.
So say you have someone access https://www.example.com/webpage, and someone wrote a link to that page as https://www.example.com/Webpage, you need BOTH entries, otherwise one of them is not going to work (unless you URL-rewrite to remove caps, or replace /Webpage with /*, but in our case, we want to limit down to folders under a certain domain, so this is a pain in the butt).
I feel like this is a bit stupid. Yes, URLs can be case sensitive, but not to the point where you would restrict a folder if its in caps, but not if it’s lowercase, right?
answered Feb 24, 2022 at 16:04
На этой странице описаны сообщения об ошибках, возвращаемые Maps JavaScript API. Этот API записывает сообщения об ошибках и предупреждения в Консоль JavaScript. Некоторые ошибки могут приводить к показу затемненной карты с водяными знаками.
Ошибки, связанные с оплатой и ключом API
Как устранить
Иногда карты могут отображаться затемненными, а панорамы Просмотра улиц – в негативе, с водяными знаками с текстом «for development purposes only» (только для целей разработки). Чаще всего такая проблема связана с ключом API или оплатой. Сервисами платформы Google Карт можно пользоваться, только если в вашем аккаунте активированы платежные функции, а в запросах к API указан действительный ключ. Подробнее читайте в разделе Проверка ошибок в браузере.
Ниже приведена последовательность шагов, которая поможет вам выявить и решить проблему.
Используете ли вы ключ API?
Не знаю. Как проверить, использую ли я ключ API?
Ключ API передается как параметр key в URL, который используется для загрузки Maps JavaScript API. Существует несколько способов проверить, используете ли вы ключ API:
- Воспользуйтесь расширением Chrome Google Maps Platform API Checker. С его помощью вы сможете определить, правильно ли реализованы лицензионные Maps API на вашем сайте.
- Если вы используете библиотеку или плагин для загрузки Maps JavaScript API проверьте настройки этой библиотеки и найдите вариант с использованием ключа API.
- Проверьте, нет ли ошибок в вашем браузере.
Если вы увидите следующие сообщения, значит вы неправильно используете ключ API: - Предупреждение Google Maps JavaScript API: NoApiKeys
- Ошибка Google Maps JavaScript API: MissingKeyMapError
Для веб-разработчиков:
-
Если у вас есть доступ к коду приложения, найдите тег
<script>, который используется для загрузки Maps JavaScript API.
При загрузке Maps JavaScript API заменитеYOUR_API_KEYв указанном ниже коде ключом API.<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> -
Проверьте в браузере сетевой трафик от вашего сайта.
В Chrome это можно сделать с помощью вкладки Network (Сеть) в инструментах разработчика.
Вы увидите сетевые запросы от вашего сайта. Запросы, сделанные с использованием Maps JavaScript API, будут указаны в путиmaps/api/js.
Здесь вы можете убедиться, что в запросах используется параметрkey.
Рекомендуем отфильтровать сетевой трафик на вкладке Network поmaps/api/js.
Нет, я не использую ключ API.
Чтобы получить ключ API, нажмите кнопку ниже. Если не запустится пошаговая настройка, выполните инструкции из руководства по началу работы с платформой Google Карт.
Начать работу
Да, я использую ключ API.
Отлично! Проверьте, привязан ли к вашему проекту платежный аккаунт.
Привязан ли к вашему проекту платежный аккаунт?
Не знаю. Как проверить, привязан ли к моему проекту платежный аккаунт?
Откройте страницу оплаты в Google Cloud Console и выберите проект, в котором был создан ключ API.
Чтобы подтвердить, что этот ключ связан с проектом, сделайте следующее:
- Перейдите в раздел Credentials (Учетные данные), выбрав на левой боковой панели Google Maps Platform > Credentials (Платформа Google Карт > Учетные данные).
- Проверьте, есть ли в списке ключ API, который вы используете в настоящее время на своем сайте.
Если его здесь нет, перейдите в другой проект и проверьте учетные данные там. - Если вы не можете найти проект для этого ключа, возможно, вы потеряли доступ к этому проекту.
Попросите коллег о помощи. Если не получается найти исходный проект, можно сделать следующее:- Создайте новый проект, нажав кнопку Создать проект в списке проектов или на странице «Менеджер ресурсов».
- Создайте новый ключ API. Это можно сделать на странице Учетные данные.
После этого нажмите Создать учетные данные и выберите Ключ API.
После того как вы найдете свой проект в Cloud Console, проверьте, привязан ли к нему платежный аккаунт, в разделе Оплата в боковом меню слева.
Нет, к моему проекту не привязан платежный аккаунт.
Откройте страницу включения оплаты в Cloud Console и добавьте к проекту платежный аккаунт. Дополнительные сведения можно найти в руководстве по началу работы с платформой Google Карт.
Да, к моему проекту привязан платежный аккаунт.
Отлично! Убедитесь, что вы указали действующий способ оплаты.
Возможно, указанный способ оплаты больше не действует (например, истек срок действия кредитной карты)?
Вы можете добавить, удалить или изменить способ оплаты в Cloud Console.
Не превышен ли установленный вами дневной лимит на использование API?
Если вы установили для любого из ваших API дневной лимит, предотвращающий неожиданный перерасход, вы можете решить проблему, увеличив этот лимит.
Проверить дневные лимиты можно на панели API и сервисы в Cloud Console. Сделайте следующее:
- Если появится запрос, выберите проект.
- Выберите API из списка и откройте вкладку Квоты.
Есть ли у вашего ключа API ограничение по IP-адресам?
Ключи API с ограничением по IP-адресам можно использовать только с веб-сервисами, которые предназначены для реализации на стороне сервера (например, Geocoding API и другие API веб-сервисов).
Большинство этих веб-сервисов имеют аналоги в Maps JavaScript API (например, сервис геокодирования).
Для использования Maps JavaScript API в службах на стороне клиента нужно создать отдельный ключ API, который будет защищен ограничением по ссылающемуся домену HTTP. Подробнее…
Коды ошибок Maps JavaScript API (для разработчиков и владельцев сайтов)
В следующей таблице приведен список кодов ошибок, которые возвращает Maps JavaScript API, с описанием их причины и способом устранения.
Как посмотреть в браузере сообщения об ошибках…
Ошибки загрузки карты
В следующей таблице приведены коды ошибок Maps JavaScript API и пояснения к ним.
| Код ошибки | Сообщение | Описание |
|---|---|---|
|
|
Maps JavaScript API должен загружаться непосредственно с серверов Google. |
Элемент script, загружающий Maps JavaScript API, некорректно добавлен на страницу. Для корректной работы API должен загружаться непосредственно с сайта https://maps.googleapis.com. Как загружать Maps JavaScript API |
|
|
This website appears to violate the Google Maps API Terms of Service. The Google Maps API has been disabled for this website. |
Ваше приложение было заблокировано из-за несоответствия Условиям использования платформы Google Карт после отправки нескольких уведомлений по эл. почте. Чтобы обжаловать блокировку и обратиться с просьбой проверить вашу реализацию приложения, заполните эту форму. Ответ будет предоставлен по электронной почте в течение нескольких рабочих дней. Если у вас есть лицензия Premium платформы Google Карт, то, чтобы исправить ошибку, достаточно указать данные этой лицензии. Подробнее… |
|
|
This URL is not authorized to use the Google Maps Client ID provided. |
Идентификатор клиента с лицензией Premium или Maps APIs for Work, включенный в script, недействителен, просрочен или адрес для загрузки Maps JavaScript API не добавлен в список авторизованных URL-адресов. Как добавить URL в список авторизованных сайтов |
Коды ошибок Maps JavaScript API
Пояснения к ошибкам в Консоли JavaScript браузера Chrome, веб-консоли Firefox и других аналогичных инструментах браузера ищите в таблице ниже.
Maps JavaScript API возвращает как ошибки, так и предупреждения.
Ошибка указывает на возникновение серьезной проблемы при загрузке Maps JavaScript API. Например, ошибка – это когда API не может быть корректно загружен на страницу и не работает на ней.
Предупреждение – это дополнительная информация о загрузке Maps JavaScript API. Она описывает возможные причины ошибки или проблемы с кодом, который загружает Maps JavaScript API.
Если вы получаете только предупреждения, но не сообщения об ошибках, API на странице будет работать. Тем не менее мы рекомендуем устранять и потенциальные проблемы.
| Код ошибки для разработчика | Тип | Описание |
|---|---|---|
|
|
Ошибка |
Maps JavaScript API не активирован в вашем проекте. Чтобы активировать Maps JavaScript API для своего проекта, нажмите кнопку ниже. |
|
|
Ошибка |
Ключ API не авторизован для использования этой службы или API. Проверьте допустимые API для вашего ключа в Google Cloud Console, чтобы убедиться, что все API и сервисы, которые вам нужны, внесены в список. Проверьте свои ключи API в Cloud Console и ознакомьтесь со статьей Рекомендации по обеспечению безопасности доступа к API. |
|
|
Ошибка |
Возможно, ваш проект API удален из Cloud Console. Для этого нажмите кнопку ниже. |
|
|
Ошибка |
Вы не включили функции оплаты в своем проекте. Сделать это для проекта в Google Cloud, связанного с ID клиента, можно здесь. |
|
|
Ошибка |
Вы не включили функции оплаты в своем проекте. Подробнее… |
|
|
Ошибка |
Срок действия ключа API, включенного в элемент script, который загружает API, истек или не распознается системой. Создав новый ключ API, вы можете получить эту ошибку, если попытаетесь использовать ключ до того, как он будет распознан системой. Подождите несколько минут и повторите попытку, иначе может потребоваться сгенерировать новый ключ API в Cloud Console. Чтобы получить ключ API, нажмите кнопку ниже. |
|
|
Ошибка |
Недопустимый идентификатор клиента в элементе script, который загружает API, или истекший срок действия идентификатора. Проверьте корректность использования своего ID клиента. Идентификатор клиента должен начинаться с префикса «gme-«. Если эта ошибка возникает даже при правильном использовании ID клиента, возможно, срок действия этого идентификатора истек. Свяжитесь с вашим менеджером Google по работе с клиентами.
Если у вас нет лицензии Premium или Maps API for Work, используйте с вашим ключом API параметр Подробнее… |
|
|
Ошибка |
Не найден ключ API в элементе script, загружающем API. Убедитесь, что используете правильный ключ. Сгенерировать новый ключ API можно в Cloud Console. Чтобы получить ключ API, нажмите кнопку ниже. |
|
|
Ошибка |
Ваше приложение использует неподдерживаемую схему URI. Используйте допустимый формат URI, определенный в RFC 3986. |
|
|
Ошибка |
В элементе script, загружающем API, отсутствует необходимый параметр аутентификации. Если вы используете стандартный Maps JavaScript API, применяйте параметр Если у вас оформлена лицензия Premium, используйте параметр Вы не можете исправить такую ошибку, если НЕ являетесь владельцем сайта. Обнаружив ее, сообщите об этом владельцу. |
|
|
Ошибка |
Ваш запрос не выполнен. Более подробную информацию ищите в Cloud Console. Cloud Console |
|
|
Ошибка |
Ваше приложение было заблокировано из-за несоответствия Условиям использования платформы Google Карт после отправки нескольких уведомлений по эл. почте. Чтобы обжаловать блокировку и запросить проверку вашей реализации приложения, заполните эту форму. Ответ будет предоставлен вам по эл. почте в течение нескольких рабочих дней. |
|
|
Ошибка |
URL-адрес, загружающий Maps JavaScript API, не был добавлен в список разрешенных источников. Проверьте источники ссылок для своего ключа API в Cloud Console. Подробнее… |
|
|
Ошибка |
Количество запросов превысило лимиты, установленные для Maps JavaScript API. Запросы вашего приложения начнут обрабатываться снова, когда наступит время следующей дневной квоты. Вы не можете исправить такую ошибку, если НЕ являетесь владельцем сайта. Обнаружив ее, сообщите об этом владельцу. Подробнее о лимитах на использование API читайте здесь. В статье также описано, как повысить эти лимиты. |
|
|
Ошибка |
Предоставленный ключ API или проект API, с которым он связан, не могут быть распознаны. Возможно, эта ошибка временная. Если ошибка повторяется, не исключено, что вам потребуется получить новый ключ API или создать новый проект. Подробнее… |
|
|
Предупреждение |
Возможно, вы указали в параметре Подробнее об идентификаторах клиента… |
|
|
Предупреждение |
Возможно, вы указали в параметре Подробнее… |
|
|
Предупреждение |
Возможно, вы некорректно указали параметр Подробнее читайте в статье Отчеты в тарифном плане Premium. |
|
|
Предупреждение |
Параметр Подробнее… |
|
|
Предупреждение |
Ключ API в элементе script, загружающем API, выглядит некорректно. Проверьте, используете ли вы правильный ключ API. Чтобы получить ключ API, нажмите кнопку ниже. |
|
|
Предупреждение |
Вы указали неверный номер версии в элементе script. Подробнее читайте в статье Версии Maps JavaScript API. |
|
|
Предупреждение |
Возможно, вы указали ID клиента в качестве параметра key. Если у вас есть лицензия Premium или Maps API for Work, укажите идентификатор в качестве значения параметра client, а не параметра key. С лицензией Premium платформы Google Карт вы можете использовать оба параметра (client или key). Если у вас нет лицензий, вместо параметра client необходимо использовать key.
Подробнее… |
|
|
Предупреждение |
Возможно, вы указали криптографический ключ или секретный код подписи в качестве параметра Подробнее… |
|
|
Предупреждение |
Возможно, вы указали в качестве параметра Подробнее… |
|
|
Предупреждение |
В элементе script, который загружает API, нет ключа API. Проверьте, указан ли действительный ключ API в качестве параметра
Чтобы получить ключ API, нажмите кнопку ниже.
Если вы попытаетесь загрузить Maps JavaScript API по ссылке на устаревшую версию (v2), то получите предупреждение |
|
|
Предупреждение |
Возможно, вы указали неподдерживаемую версию в элементе script. Подробнее читайте в статье Версии Maps JavaScript API. |
|
|
Предупреждение |
Параметр |
|
|
Предупреждение |
Параметр |
|
|
Предупреждение |
Параметр |
|
|
Ошибка |
Произошла ошибка, которая не относится к другим категориям, описанным на этой странице. Это может быть вызвано временной проблемой. Повторите запрос через некоторое время. Если проблема не исчезнет, сверьтесь с руководством для разработчиков, чтобы понять, имеет ли ваш запрос правильный формат. |
Проверка ошибок в браузере
Maps JavaScript API записывает сообщения об ошибках в window.console. В этом разделе мы рассказываем, как проверить выходные данные window.console в Google Chrome. Если вы используете другой браузер, обратитесь к его документации для разработчиков. Ниже даны ссылки на инструменты, с помощью которых можно проверить выходные данные window.console в некоторых других браузерах:
- Консоль Internet Explorer
- Веб-консоль Firefox
- Удаленная отладка в Android
- Веб-инспектор iOS
Вот как использовать консоль JavaScript для проверки выходных данных window.console в Chrome:
- Откройте инструменты разработчика (нажмите на значок меню > Другие инструменты > Инструменты разработчика).
-
Чтобы открыть консоль 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.
- As the error says, “See the JavaScript console for technical details.”
- Open JavaScript console.
- If your console looks the same as in the below image then your error is MissingKeyMapError.
- If your console looks the same as in the below image then your error is RefererNotAllowedMapError.
- If your console looks the same as in the below image then your error is ApiNotActivatedMapError.
- If your console looks the same as in the below image then your error is InvalidKeyMapError.
- 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.
- Go to the Google Maps Platform.
- Click Get Started.
- 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.
- You will then be asked to choose products. Choose Maps then click Enable then answer the short survey.
- API key will be generated and shown. Copy it to your clipboard with the button on the right then click on “Done”.
- Go to Geolocation API then click Enable.
- Now click on Credentials from the menu.
- Click your “Maps API Key” and select HTTP referrers under Application restrictions.
- 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/*
- Click Save at the bottom and you’re done.
- 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.
- Go to https://console.developers.google.com/apis/credentials
- Click your API key’s name to edit its settings.
- 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/*
- 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.
- Go to https://console.developers.google.com/apis/library
- Search for APIs that you are using.
- Click the API you’re using.
- 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.
- Go to https://console.developers.google.com/apis/credentials
- Copy your key.
- 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.
- Wait five minutes. Google says it can take up to five minutes for the changes to take effect.
- 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.
- 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.
Pubblicato il 25 Agosto 2016 in How-To and Troubleshooting |
![Google Maps API error: RefererNotAllowedMapError [SOLVED]](https://www.latecnosfera.com/wp-content/uploads/2016/06/Google-Maps-Error-633x210.jpg)
While trying to embed Google Maps on your website, you may encounter the nasty Google Maps API error: RefererNotAllowedMapError in your browser console. Let’s see how to fix it.
As the name suggests, this error is related to the Google Maps API keys. You need one of them in order to embed Google Maps on your websites, and you can get it following the tutorial on this page.
After creating your API key, you can restrict its usage to a list of URLs, in order to protect your daily quota (25,000 map loads per project per day) from unauthorized usage. And here it come the problems.
You must be very careful when adding URLs to the authorized referrers field. First of all, let’s see what the official documentation says on this topic:
The following considerations apply regarding URLs that are authorized:
The domain name or IP address does not have to be publicly accessible
For example, http://myintranet and http://192.168.1.1 are valid entries.
All subdomains of a specified domain are also authorized
For example, if http://example.com is authorized, then http://www.example.com is also authorized. The reverse is not true: if http://www.example.com is authorized, http://example.com is not necessarily authorized.
All subpaths of an authorized path are also authorized
For example, if http://example.com is authorized, then http://example.com/foo is also authorized. In addition, because subdomains of a specified domain are also authorized, http://sub.example.com/bar is authorized.
Paths are case sensitive
For example, http://www.example.com/ThisPath/ is not the same as http://www.example.com/thispath/.
You may restrict valid URLs to those using certain ports
For example, if http://example.com:8080/foo is specified, that doesn’t authorize http://example.com.
HTTP and HTTPS protocols are considered different URLs
For example, if https://example.com is authorized, http://example.com is not necessarily authorized. If you’d like to authorize both at once, you may add a domain without using a protocol: example.com/
All the rules above are applied to each authorization, so you should take care to plan your authorizations carefully. For example, because all subpaths of a specified path are authorized, and all subdomains, you may end up authorizing pages that you didn’t intend to. For example:
http://example.com/ also authorizes http://sub.example.com/path.
In addition to the above, just few other considerations are needed:
- If your URL version without http:// or https:// protocols doesn’t work, try to add to the list also the same URLs preceded by them.
- Each change you make may take a few minutes before being effective.
- If you don’t need any restriction, and to leave the field blank doesn’t work for you, try to add an asterisk * instead.
Did this article help you to fix the Google Maps API error: RefererNotAllowedMapError? Tell us in a comment below!
I am getting the error RefererNotAllowedMapError from some PC’s when I load a page on my site.
RefererNotAllowedMapError
The current URL loading the Google Maps JavaScript API has not been
added to the list of allowed referrers. Please check the referrer
settings of your API key on Google Cloud Console.See API keys
It works OK on FireFox from 3 out of four of the machines I have tested.
Generally this would mean that the domain is not added as a referer in my API console but it definitely is, and it definitely works on other machines.
Anyone else had this issue or able to provide some guidence?
asked Sep 16, 2015 at 5:19
3
Try to add all type of urls like:
http://stackoverflow.com/*
http://www.stackoverflow.com/*
*.stackoverflow.com/*
Definitely it will work.
answered Sep 19, 2016 at 11:59
BuntyBunty
1,50913 silver badges18 bronze badges
Note the DOT at the beginning of the expression, it’s a char!
*.stackoverflow.com/* // this will not work with http://stackoverflow.com and will allow for domains such as demo.stackoverflow.com
Replace above with:
*://stackoverflow.com/* // now it will cover all domain variation but not subdomains.
answered Jan 4, 2018 at 4:27
DevWLDevWL
16.4k6 gold badges88 silver badges83 bronze badges
3
For me to use Places API I had to turn on Maps JavaScript API
answered Aug 27, 2019 at 11:15
jean d’armejean d’arme
3,8996 gold badges33 silver badges64 bronze badges
1
This gives error because your Google map API key is not a browser key. Create new key as ‘browser key’. This option is available when you create a new key.
answered Mar 21, 2016 at 10:53
R.evolvanR.evolvan
911 gold badge1 silver badge4 bronze badges
I had a similar issue where I was trying to use the API but had it restricted to Map product only. It generated the same error even though http referrer box had nothing in it (open for all). The problem went away after recreating a new key without any product restriction.
answered Apr 18, 2018 at 19:05
Mir3Mir3
931 silver badge7 bronze badges
0
Creating an new Browser Key fixed it for me.
https://console.developers.google.com/projectselector/apis/credentials
RefererNotAllowedMapError Error The current URL loading the Google
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 API Console.See API keys in the Google API Console. For more information, see Best
practices for securely using API keys.
answered Jan 5, 2018 at 6:56
The only thing that worked for me was to create a brand new key w/no restrictions, including no API restrictions.
This won’t be a working solution in the production environment, but it allows us to move ahead w/development.
answered Sep 26, 2018 at 21:25
Dr. HilariusDr. Hilarius
1,1141 gold badge14 silver badges20 bronze badges
The solution to every/such Maps Javascript API error varies for different scenarios for different developers. A list of errors with detailed description is given by google here
Nevertheless please refer the below snap:
- As you can see above under Application restrictions just by selecting the HTTP referrers won’t do. You have to add a URL(i.e the URL of the website from which the api will be called to render the map).
- Now the exact page(in my case the contact us page) which is gonna make the request to the api needs to be mentioned in the url and not just the domain.
- Please go through the examples given in the documentation on the right
- Adding a
/*after the domain url likehttp://www.telesuprecon.com/*will make the request possible from any page within your website.
answered Sep 18, 2019 at 13:14
Tahir77667Tahir77667
2,15816 silver badges15 bronze badges
I am getting the error RefererNotAllowedMapError from some PC’s when I load a page on my site.
RefererNotAllowedMapError
The current URL loading the Google Maps JavaScript API has not been
added to the list of allowed referrers. Please check the referrer
settings of your API key on Google Cloud Console.See API keys
It works OK on FireFox from 3 out of four of the machines I have tested.
Generally this would mean that the domain is not added as a referer in my API console but it definitely is, and it definitely works on other machines.
Anyone else had this issue or able to provide some guidence?
asked Sep 16, 2015 at 5:19
3
Try to add all type of urls like:
http://stackoverflow.com/*
http://www.stackoverflow.com/*
*.stackoverflow.com/*
Definitely it will work.
answered Sep 19, 2016 at 11:59
BuntyBunty
1,50913 silver badges18 bronze badges
Note the DOT at the beginning of the expression, it’s a char!
*.stackoverflow.com/* // this will not work with http://stackoverflow.com and will allow for domains such as demo.stackoverflow.com
Replace above with:
*://stackoverflow.com/* // now it will cover all domain variation but not subdomains.
answered Jan 4, 2018 at 4:27
DevWLDevWL
16.4k6 gold badges88 silver badges83 bronze badges
3
For me to use Places API I had to turn on Maps JavaScript API
answered Aug 27, 2019 at 11:15
jean d’armejean d’arme
3,8996 gold badges33 silver badges64 bronze badges
1
This gives error because your Google map API key is not a browser key. Create new key as ‘browser key’. This option is available when you create a new key.
answered Mar 21, 2016 at 10:53
R.evolvanR.evolvan
911 gold badge1 silver badge4 bronze badges
I had a similar issue where I was trying to use the API but had it restricted to Map product only. It generated the same error even though http referrer box had nothing in it (open for all). The problem went away after recreating a new key without any product restriction.
answered Apr 18, 2018 at 19:05
Mir3Mir3
931 silver badge7 bronze badges
0
Creating an new Browser Key fixed it for me.
https://console.developers.google.com/projectselector/apis/credentials
RefererNotAllowedMapError Error The current URL loading the Google
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 API Console.See API keys in the Google API Console. For more information, see Best
practices for securely using API keys.
answered Jan 5, 2018 at 6:56
The only thing that worked for me was to create a brand new key w/no restrictions, including no API restrictions.
This won’t be a working solution in the production environment, but it allows us to move ahead w/development.
answered Sep 26, 2018 at 21:25
Dr. HilariusDr. Hilarius
1,1141 gold badge14 silver badges20 bronze badges
The solution to every/such Maps Javascript API error varies for different scenarios for different developers. A list of errors with detailed description is given by google here
Nevertheless please refer the below snap:
- As you can see above under Application restrictions just by selecting the HTTP referrers won’t do. You have to add a URL(i.e the URL of the website from which the api will be called to render the map).
- Now the exact page(in my case the contact us page) which is gonna make the request to the api needs to be mentioned in the url and not just the domain.
- Please go through the examples given in the documentation on the right
- Adding a
/*after the domain url likehttp://www.telesuprecon.com/*will make the request possible from any page within your website.
answered Sep 18, 2019 at 13:14
Tahir77667Tahir77667
2,15816 silver badges15 bronze badges
Содержание
- Error Messages
- API Key and Billing Errors
- Troubleshooting
- Are you using an API key?
- I’m not sure. How can I check if I am using an API key?
- For web developers:
- No, I am not using an API key.
- Yes, I am using an API key.
- Is a billing account attached to your project?
- I’m not sure. How can I check if billing account is attached to my project?
- No, a billing account is not attached to my project.
- Yes, a billing account is attached to my project.
- Is the provided billing method no longer valid (for example an expired credit card)?
- Is there an exceeded self-imposed daily limit on the API?
- Does your API key have an IP addresses restriction?
- Maps JavaScript API Error Codes for Developers and Site Owners
- Map Loading Errors
- Maps JavaScript API Error Codes
- Checking Errors in Your Browser
- Handling unsupported browsers
- If your code still isn’t working
Error Messages
This page describes the error messages that can be returned by the Maps JavaScript API. The Maps JavaScript API writes error and warning messages to the JavaScript console. Certain error conditions may also occur, which result in the display of a darkened watermarked map.
API Key and Billing Errors
Troubleshooting
Under certain circumstances, a darkened map, or ‘negative’ Street View image, watermarked with the text «for development purposes only», may be displayed. This behavior typically indicates issues with either an API key or billing. In order to use Google Maps Platform products, billing must be enabled on your account, and all requests must include a valid API key. For help on finding error messages, see the section on checking errors in your browser.
The following flow will help you troubleshoot the issue.
Are you using an API key?
I’m not sure. How can I check if I am using an API key?
An API key is passed as the key parameter in the URL that is used to load the Maps JavaScript API. Here are a few options to check if you are using an API key:
- Use the Google Maps Platform API Checker Chrome extension. This allows you to determine if your website is properly implementing Google’s licensed Maps APIs.
- If you are using a library or plugin to load the Maps JavaScript API, check the settings for that library and look for an API key option.
- Check errors in your browser. If you see the following messages, you are not using your API key correctly:
- Google Maps JavaScript API warning: NoApiKeys
- Google Maps JavaScript API error: MissingKeyMapError
For web developers:
- If you have access to the source code of your application, look for the
No, I am not using an API key.
To get an API key, click the button below. If you do not see a guided setup, follow the full instructions at Get Started with Google Maps Platform.
Get Started
Yes, I am using an API key.
Great! Let’s move on and check if a billing account is attached to your project.
Is a billing account attached to your project?
I’m not sure. How can I check if billing account is attached to my project?
Go to the Billing page in the Google Cloud Console and select the project under which your API key was created. To confirm the key is associated with the project:
- Go to the Credentials section, which can be accessed from the left side bar under Google Maps Platform > Credentials.
- Check that the API key you currently use on your website is listed. If that’s not the case, switch to a different project, and check the credentials there.
- If you cannot locate the project for your API key, you may have lost access to this project. Ask others in your organization for help. If the original project cannot be located, you should:
- Create a new project. This can be done by selecting New Project from the projects list, or by selecting Create Project via the Resource Manager page.
- Create a new API key. This can be done on the Credentials page. Once there click Create credentials and then select API key.
Once you have located your project in the Cloud Console, check if a billing account is attached by navigating to the Billing section in the left side menu.
No, a billing account is not attached to my project.
Go to the Enable Billing page in the Cloud Console and add a billing account to your project. For additional information, see Get Started with Google Maps Platform.
Yes, a billing account is attached to my project.
Great! Let’s make sure the provided billing method is valid.
Is the provided billing method no longer valid (for example an expired credit card)?
Is there an exceeded self-imposed daily limit on the API?
If you have set a daily limit on any of your APIs, which is common to prevent unexpected increases, you can resolve this by increasing your daily limit.
You can check your daily limits by going to the APIs & Services Dashboard in the Cloud Console. Once there:
- Select a project if prompted.
- Select an API from the list, then click the Quotas tab.
Does your API key have an IP addresses restriction?
API keys with an IP addresses restriction can only be used with web services that are intended for use from the server side (such as the Geocoding API and other Web Service APIs). Most of these web services have equivalent services within the Maps JavaScript API (for example, see the Geocoding Service). To use the Maps JavaScript API client side services, you will need to create a separate API key which can be secured with an HTTP referrers restriction (see Get, add, and restrict an API key).
Maps JavaScript API Error Codes for Developers and Site Owners
The following tables list the possible error codes returned by the Maps JavaScript API, with a description of the cause and how you can fix the problem. For help on finding the error messages, see the section on checking errors in your browser.
Map Loading Errors
If you encounter an error while loading the Maps JavaScript API, please see the table below to find explanations for the error codes.
The script element that loads the Maps JavaScript API is not being included correctly on your page. In order for the API to work correctly, it must be loaded directly from https://maps.googleapis.com.
Your application was blocked for non-compliance with the Google Maps Platform Terms of Service, following several email notifications. To appeal the block and have your implementation reviewed, please complete this form. You will receive a response via email within a few business days.
If you have a Google Maps Platform Premium Plan license, please use your Google Maps Platform Premium Plan credentials to resolve this error. See the guide to Premium Plan authentication.
The Premium Plan or Maps APIs for Work client ID included in the script load is invalid, expired, or the current address loading the Maps JavaScript API has not been added to the list of authorized URLs.
Maps JavaScript API Error Codes
If you find an error on Chrome JavaScript Console, Firefox Web Console or any other equivalent tools on your browsers, please see the table below to find explanations for the error codes.
The Maps JavaScript API returns both errors and warnings. An error indicates a severe issue which occurred while loading the Maps JavaScript API. Your page cannot load the API correctly, and the API will not work on that page. A warning is a supplemental message about the loading of the Maps JavaScript API. The warning describes the possible reasons for an error, or suggests potential issues in your code that loads the Maps JavaScript API. If you receive only warnings without any errors, the API will work correctly on that page. However, we recommend that you fix these potential issues as well.
| Error Code | Message | Description |
|---|---|---|
| NotLoadingAPIFromGoogleMapsError | The Maps JavaScript API must be downloaded directly from Google’s servers. | |
| TOSViolationMapError | This website appears to violate the Google Maps API Terms of Service. The Google Maps API has been disabled for this website. | |
| UnauthorizedURLForClientIdMapError | This URL is not authorized to use the Google Maps Client ID provided. |
The Maps JavaScript API is not activated on your API project. You may need to enable the Maps JavaScript API under APIs in the Google Cloud Console.
To activate the Maps JavaScript API for your project, click the button below.
Learn How
This API key is not authorized to use this service or API. Please check the API restrictions settings of your API key in the Google Cloud Console to ensure that all of the APIs and services you need to use are correctly specified in the list of enabled APIs.
Your API project may have been deleted from the Cloud Console. Please check the project for which you generated the API key that’s included in JavaScript API loader. You can create a new API project and get a new key in the Cloud Console.
To create a new project and get an API key for the project, click the button below.
Learn How
You have not enabled billing on your project. You must enable Billing on the Google Cloud Project associated to this client ID, here.
You have not enabled billing on your project which is causing this error. You must enable Billing on the Google Cloud Project here.
The API key included in the script element that loads the API has expired or is not recognized by the system. You may receive this error after creating a new API key if you try to use the key before it is recognized by the system. Wait a few minutes and try again, or you may need to generate a new API key in the Cloud Console.
To get an API key, click the button below.
Get Started
The client ID included in the script element that loads the API is invalid, or expired. Please make sure you are using your client ID correctly. The client ID should start with «gme-» prefix. If you see this error even when using your client ID correctly, the client ID may have expired. Please contact your Google Account Manager.
If you do not have a Premium Plan or Maps APIs for Work license, you need to use a key parameter with your API key instead of the client parameter.
The API key included in the script element that loads the API is not found. Please make sure you are using a correct API key. You can generate a new API key in the Cloud Console.
To get an API key, click the button below.
Get Started
Your application uses an unsupported URI scheme. Verify that the application uses a valid URI format as defined in RFC 3986.
The script element that loads the API is missing the required authentication parameter.
If you are using the standard Maps JavaScript API, then you must use a key parameter with a valid API key. For more information, see Get Started with Google Maps Platform.
If you are a Premium Plan customer, then you must use either a client parameter with your client ID, or a key parameter with a valid API key. For more information, see the guide to API keys and client IDs.
If you are NOT the website owner, then there are no steps that you can take to fix this error. However, you might want to notify the site owner if possible.
Your request has not been completed. You may be able to find the more details about the error in the Cloud Console.
Your application was blocked for non-compliance with the Google Maps Platform Terms of Service, following several email notifications. To appeal the block and have your implementation reviewed, please complete this form. You will receive a response via email within a few business days.
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 in the Cloud Console.
See the Maps JavaScript API and Get an API Key.
The number of requests has exceeded the usage limits for the Maps JavaScript API. Your app’s requests will work again at the next daily quota reset.
If you are NOT the website owner, there are no steps you can take to fix this error. However, you may want to notify the site owner if possible.
For more details, see the guide to usage limits. The page also explains how you can get higher usage limits.
Either the provided API key or the API project with which it is associated, could not be resolved. This error may be temporary. If this error message persists you may need to get a new API key or create a new API project.
You may have supplied a cryptographic key in the client parameter. If you have a Premium Plan or Maps APIs for Work license, please specify your client ID as the client parameter. You don’t need to use your cryptographic key for the Maps JavaScript API.
See the guide to client IDs for Premium Plan and Maps APIs for Work customers.
You may have supplied an API key in the client parameter. If you have a Premium Plan or Maps APIs for Work license, please specify your client ID as the client parameter. If you have a Google Maps Platform Premium Plan, you can use a client parameter or a key parameter. If you don’t have any licenses, you must use a key parameter, instead of a client parameter.
You may have supplied an invalid channel parameter. The channel must be an ASCII alphanumeric string, which may include period (.), underscore (_) and hyphen (-). Please make sure that you are specifying a valid channel parameter.
The client parameter doesn’t seem to contain a correct client ID. A client ID should start with «gme-«.
The API key included in the script element that loads the API does not look correct. Please make sure you are using a correct API key. You can generate a new API key in the Cloud Console.
To get an API key, click the button below.
Get Started
You may have supplied an incorrect version number in your script element. Please make sure you are using a correct version number.
You may have supplied a project number as a key parameter. Please make sure you are using a correct API key. You can generate a new API key in the Cloud Console.
Learn how to get an API key.
The script element that loads the API has no API key. Please make sure you include a valid API key as a key parameter. You can generate a new API key in the Cloud Console.
To get an API key, click the button below to get started.
Get Started
If you are loading Maps JavaScript API from the deprecated v2 path, you will get the NoApiKeys warning, even if you specified the key parameter. Please check the v2 to v3 upgrade guide and migrate your application to Maps JavaScript API v3.
You may have supplied a retired version in your script element. Please update your application to use one of the available versions.
The sensor parameter is no longer required for the Maps JavaScript API. It won’t prevent the Maps JavaScript API from working correctly, but we recommend that you remove the sensor parameter from the script element.
The signature parameter is not required for the Maps JavaScript API. It won’t prevent the Maps JavaScript API from working correctly, but it may introduce security risks. Please remove it from your script element.
The signed_in parameter has been deprecated and is not supported on the version of the Maps JavaScript API you are using. This won’t prevent the Maps JavaScript API from working, but the behavior of your application may change, if you rely on signed-in features.
An error has occurred that doesn’t fit into the other categories on this page. This could be caused by a temporary problem. Please retry the request after a short delay. If that doesn’t solve the problem, please review the developer’s guide to make sure the request has the proper format.
Checking Errors in Your Browser
The Maps JavaScript API writes error messages to window.console . This section explains how you can check the window.console output in Google Chrome. If you are using any other browsers, please check the developer documentation for your browser. For your reference, this is a list of tools to check window.console output in some other browsers.
In Chrome, you can use the JavaScript Console to check window.console output as follows.
- To open the Developer Tools, select the menu icon > More Tools > Developer Tools.
- To open the JavaScript Console, press the ESC key on your keyboard. The ESC key will toggle the JavaScript Console. If you close the console, press the ESC key again to open it.
If any errors or warnings occurred when loading the Maps JavaScript API, they appear as one or more lines in the console. An error or warning message has the following format:
Google Maps API error: [ERROR CODE] [Link to API document]
or
Google Maps API warning: [ERROR CODE] [Link to API document]
You can check the error codes table above to find the error code in the error message. You can also find the details about the error message in the API document linked from the message.
Note: You can listen for authentication errors programmatically.
Handling unsupported browsers
Ensure that the version of the browser you are using is currently supported by the Maps JavaScript API.
If you’re developing a native Windows application that runs in a WebView, ensure that you are using WebView2 based on Edge. Previous versions of WebView, based on Internet Explorer, are no longer supported.
If your code still isn’t working
- Look for typos. Remember that JavaScript is a case-sensitive language.
- Check the basics — some of the most common problems occur with the initial map creation. Such as:
- Confirm that you’ve specified the zoom and center properties in your map options.
- Ensure that you have declared a div element in which the map will appear on the screen.
- Ensure that the div element for the map has a height. By default, div elements are created with a height of 0, and are therefore invisible.
Refer to our examples for a reference implementation.
- Use a JavaScript debugger to help identify problems, like the one available in the Chrome Developer Tools. Start by looking in the JavaScript console for errors.
- Post questions to Stack Overflow. Guidelines on how to post great questions are available on the Support page.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Источник
Adblock
detector
| Developer Error Code | Type | Description |
|---|---|---|
| ApiNotActivatedMapError | Error | |
| ApiTargetBlockedMapError | Error | |
| DeletedApiProjectMapError | Error | |
| ClientBillingNotEnabledMapError | Error | |
| BillingNotEnabledMapError | Error | |
| MalformedCredentialsMapError | Error | |
| RefererNotAllowedMapError | Error | |
| ClientIdLooksLikeCryptoKey | Warning | |
| KeyLooksLikeClientId | Warning | You may have supplied a client ID as a key parameter. If you have a Premium Plan or Maps APIs for Work license, please specify your client ID as a client parameter instead of the key parameter. If you have a Google Maps Platform Premium Plan, you can use a client parameter or a key parameter. If you don’t have any licenses, you must use a key parameter, instead of a client parameter.
You may have supplied a cryptographic key or signing secret as a key parameter. If you have a Premium Plan or Maps APIs for Work license, please specify your client ID as a client parameter, and remove the key parameter from your script element. The cryptographic key is not required for the Maps JavaScript API. If you have a Google Maps Platform Premium Plan, you can use a client parameter or a key parameter. If you don’t have any licenses, you can get an API key in the Cloud Console. |
| KeyLooksLikeProjectNumber | Warning | |
| SignatureNotRequired | Warning | |
| UrlAuthenticationCommonError | Error |
Are you seeing “This page didn’t load Google Maps correctly” in place of maps on your website? This error has become a lot more common since Google Maps started requiring an API key on June 22, 2016 (after about 10 years of allowing keyless use). If you started using Google Maps on your website on or after that date then you will need to sign up for and implement an API key (older users still do not need a key).
Google has not made setting up an API key a very user-friendly process. Their interface is geared towards developers. As such, many users have trouble correctly creating a key. This guide is not just for our WordPress theme and plugin users but for anybody on the Internet who wants to know how to fix the “This page didn’t load Google Maps correctly” error on their website.
Find the Cause of “This page didn’t load Google Maps correctly”
First, let’s find out exactly why the “This page didn’t load Google Maps correctly” error is showing. There are multiple things that can cause it but fortunately Google gives us a way to learn the specific reason. This helps us know what to do to fix it. Notice the last part of the error says to open the JavaScript console for “technical details”. That’s what we need.
Oops! Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details.
You can open the JavaScript console in your browser with a few keystrokes. There is an excellent answer on StackOverflow that tells you plainly how to open the JavaScript console in different browsers. After doing that, you should be able to find an entry looking something like this.
Listed below are the most common errors reported by our users.
- MissingKeyMapError – An API key is not being used
- RefererNotAllowedMapError – Key doesn’t allow your URL
- ApiNotActivatedMapError – API is not enabled
- InvalidKeyMapError – The API key used is incorrect
- How to Fix Other Errors – More errors are possible
Now that you know exactly what is causing the error, you can fix it. Here are fixes for the most common Google Maps API errors shown in the console.
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 in order for maps to show.
Create a Google Maps API Key
Follow these steps to create and implement a Google Maps API Key.
- Go to the Google Maps Platform welcome page then click Get Started. You may need to log in or create an account if you do not already have a Google Account.
- 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.
- You will then be asked to choose products. Choose Maps then click Enable then answer the short survey.
- An API key will be generated and shown. Copy it to your clipboard with the button on the right then click Done.
- Our customers can go to their WordPress admin area and paste the key into Settings > Church Content > Locations then click Save Changes. Do not stop on this step. You still need to secure your key.
- Return to the Overview on Google Maps Platform. Under Enabled APIs (you may need to scroll to see this), click View all APIs.
- Under Additional APIs, click Geocoding API then Enable.
- Now choose Credentials in the menu to prevent other websites from using your key.
- Click your “Maps API Key” and select HTTP referrers under Application restrictions.
- 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/*
- Click Save at the bottom and you’re done.
Note: Google says it can take up to 5 minutes for your key to become active. We’ve heard reports of it taking 30 minutes or longer. Keep this in mind if your maps do not show right away.
How to Fix RefererNotAllowedMapError
RefererNotAllowedMapError is the most common error we’ve seen apart from not using a key. The console will also say, “Your site URL to be authorized”. It relates to Steps 9 and 10 above when creating your key. Here’s how to fix the error.
- Go to https://console.developers.google.com/apis/credentials
- Click your API key’s name to edit its settings.
- 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/*
- 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.
- Go to https://console.developers.google.com/apis/library
- Under “Maps”, click “View All” to see all API’s.
- Click the API you’re using. Our themes and plugins use the Maps JavaScript API, Maps Static API and Geocoding API. Your product may use something different but the JavaScript API is most common for a website.
- Click the Enable button at the top and wait a few minutes for the changes to take effect (Google says changes can take up to 5 minutes).
- Repeat for other API’s you’re using (remember, our themes and plugins use the Maps JavaScript, Maps Static and Geocoding API’s).
Tip: If you’re using a different product than ours, you may need to enable a different API. If you’re unsure which API to enable, you can try enabling all of them (or ask your provider).
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.
- Go to https://console.developers.google.com/apis/credentials
- Copy your key.
- If you’re using our WordPress plugin, go to Settings > Church Content > Locations and paste your key into the Google Maps API Key field then click Save Changes. Otherwise, do similar according to the product you’re using.
How to Fix Other Errors
This guide covers the errors we’ve seen most commonly. There are other errors. To learn there causes and how to fix them, see the Google Maps API Error Messages documentation.
It’s Still Not Working
Here are three things to check if you are still seeing the “This page didn’t load Google Maps correctly” error.
- Wait five minutes. Google says it can take up to five minutes for the changes to take effect. I have heard that it can take up to 30 minutes in some cases, but give it at least five minutes.
- 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.
- 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.
If you’re one of our customers, please contact us for support and we’ll help get your maps working.
In Conclusion
We hope Google will improve the process of creating an API key now that they have made it a requirement for millions of non-developer users. Until then, I hope this guide will be helpful to many.
If you have any tips to add, please leave a comment…