Google maps API referrer not allowed - javascript

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?

Recreating the API key at console.developers.google.com fixed the issue for me.

Try to add all type of urls like:
http://stackoverflow.com/*
http://www.stackoverflow.com/*
*.stackoverflow.com/*
Definitely it will work.

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.

For me to use Places API I had to turn on Maps JavaScript API

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.

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.

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.

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.

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 like http://www.telesuprecon.com/* will make the request possible from any page within your website.

Related

Querying Google Street View API URL ignores API restrictions

I have generated an API key to consume the JS Maps API and added a few restrictions such as:
*.mysite.com
mysite.com/events/*
Now, if I include the script in a page that is served from a domain that is not mysite.com I see:
Google Maps JavaScript API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://null.someotherdomain.com/
This is all ok.
Now, if I request locally a Google APIs URL like https://maps.googleapis.com/maps/api/streetview?size=400x400&location=40.720032,-73.988353&fov=90&heading=235&pitch=10&key=MY_API_KEY
As long as MY_API_KEY exists, I do get a valid response, via either a curl or by using a browser.
Shouldn't this content be prevented from rendering at all since the key is meant to serve only requests coming from mysite.com?
I also tried restricting the key even more and removing the access to the JS Maps api and it still returns a Street View image.
I might be missing something entirely obvious here, can anyone shed some light?
EDIT
Another restriction that I put in place is by API:
As you can see, the Street View API is explicitly disabled

Google Maps Error :This page didn't load Google Maps correctly. See the JavaScript console for technical details

I am developing a android application using cordova and I am facing a issue regarding google maps javascript api.
We have a purchased API and included it in the following format ..
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&client=<?php echo MAP_CLIENT; ?>&signature=<?php echo MAP_SIGNATURE; ?>"></script>
Using this particular script works absolutely fine in the web browser but is showing a error as follows.
Oops! Something went wrong. This page didn't load Google Maps
correctly. See the JavaScript console for technical details
As you are using the Premium plan with a client parameter you should authorize the URL you are loading an API from in your Google cloud support portal.
To prevent a third party from using your client ID on their own website, the use of your client ID is restricted to a list of URLs that you specifically authorize.
To see the URLs you have already authorized or to authorize additional URLs:
Log in to the Google Cloud Support Portal.
In the left-hand menu, click Maps: Manage Client ID.
You can add up to 100 URLs at a time. A Client ID may be associated with up to 3000 authorized URLs. If you expect your application to host Google Maps content from more than 3000 locations, you should switch to using API keys instead.
source: https://developers.google.com/maps/documentation/javascript/get-api-key#registering-authorized-urls
In order to figure out what is the URL that you should authorize, check the value of the window.location.href in you hybrid app. This value should be added to the list of authorized URLs.
Also note that Maps JavaScript API doesn't have signature parameter. You must delete it, especially if you expose there your cryptographic key which must be private.
I hope this helps!

Google Maps JavaScript API is working in localhost but not in Live Server

Currently, I'm trying to implement Google Map Autofill address functionality to get the address latitude and longitude on my website.
I've created a Google Maps JavaScript API key on Google Console and insert the API key in the script:
<script src="https://maps.googleapis.com/maps/api/js?key=[api_key]&libraries=places&callback=initAutocomplete"
async defer></script>
when I'm running the project in localhost, it's giving me the autofill suggestion addresses along with the latitude and longitude for the particular address which I've chosen.
But, when I'm trying to run the project on a live server it's giving me several errors. Fixed all the errors, but still, it's not giving me the result.
Tried for 5-6 days, tried different APIs, but the result is same.
Even I copied the code from https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform and inserted my API key, but nothing seems working.
Can anyone suggest what I need to do?
The error you get is indicating that the API key used has referrer restrictions, and the domain you are trying to use the API key on is not an authorized referrer.
It's possible that you may need to add asterisks for wildcards to your authorized referrers. For example your test link:
http://test.digiegeeks.com/gmap/
You should authorize something like:
*.digiegeeks.com/*
Or for your secure p4programming domain you mentioned, something like this:
*.p4programming.net/*
If you include asterisks as shown above as wildcards, do you still get the referrer error?
I hope this helps!

Google Timezone API key

I'm trying to implement Google's Time Zone API and even though I have generated a Browser API key, added it to my code, and added the referrer to the Google Developers Console, I am still getting the following error when trying to use JavaScript to return the data:
This IP, site or mobile application is not authorized to use this API
key. Request received from IP address 12.34.56.789, with referer:
https://www.example.com/timezone
My referrer in the developers console is
*.example.com/*
The documentation says I need a server key but I tried and it didn't work either (and it doesn't make sense to need a server key vs a browse key).
And ideas of what I can check to see why this isn't working? If I delete the referrer, everything works. So, I know it has something to do with that but the referrer matches the wildcard according to Google's own documentation. Furthermore, even if I enter the referrer exactly as the error indicates, I still get the REQUEST_DENIED status.
Figuring this was a bug in the API, I logged an issue with Google support. Turns out, there currently does not exist a JavaScript API for time zone, only a Web Service that requires a Server Key. Here's the link to the issue on Google Code.
Still needing a way to get timezone info from lat/lng I started using timezonedb.com. There is no way to limit referrer but at least it's something.

How to google maps api keys safe on website

I am using the google maps api on my website and would like to use my API key, but I'm confused about how to keep it safe. I know that I could just hardcode the actual key right into index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=HARDCODED_KEY"></script>
But then it's right there for anyone to see when they view the source code for the site. I also don't want it to show up in the DOM if someone's viewing the site with a debugging tool, like Firebug.
I'm assuming that there is a way to store it in a separate file (probably outside my html/ directory) that I can source. If anyone could provide an example or comment on whether this approach would be relatively secure, I'd really appreciate the help. I've found other posts on this topic, but none that apply for this (relatively simple) case.
Just set the referrers, as mentioned in the documentation:
To prevent other applications from using your key and consuming your
quota, you can limit the IP addresses that can use your API key to
send requests:
Visit the Google Developers Console and log in with your Google
account. Select the project that was created for you when you signed
up. The project name will start with Google Maps API for Work.In the
sidebar on the left, select Credentials. Find the key you're using
under the Public API Access heading, and click Edit allowed IPs. Enter
the IP addresses from which your key is to be accepted, one per line.
You may also enter a subnet using CIDR notation (e.g. 192.168.0.0/22).
Also you may come up with this question after you set the referral, I think you'll find it useful.
Store the API in a text file. Then, use jQuery $.get() to retrieve it. Make sure the configure your .htaccess file to disallow direct TXT file access.
To load Google Maps API dynamically, use $.getScript() in your code, right before you need the map.
Google also recommends restricting API usage by referral and/or IP address.

Categories

Resources