When is a Google Maps API key required? - javascript

Recently Google changed it's policy on the use API keys. You're now supposed to no longer need an API key to place Google Maps on your website.
And this worked perfectly. But now I have this map (without API key) running on my localhost, which works fine. But as soon as I place it online, I get a popup saying that I need another API key. And on another page on that website, Google Maps does work. Could it maybe have something to do with that the map that doesn't work have a lot (30+) of markers on it?
Actually using an API key wouldn't be a very nice solution to me, as this is part of a Wordpress plugin used on many websites.

Sounds like you're running v2~ time to upgrade, or get a key for the domain you want to run it on:
Google Maps V2 API Key Request

You do not need an API Key to use Goolge Maps API V3. However, we just experienced an issue where Google reported that we had exceeded our limit, even though we didn't (Development Server). I went ahead and set up an API Key, and its actually beneficial, because you then get usage reporting. Also, we haven't seen the false Quota usage problem since then. I thought I would go ahead a share the process:
Goto https://console.developers.google.com/
Click the red 'Create Project' button
Give your project a name and Google will automatically give it an ID
Wait until the Spinny on the bottom says your project is complete.
In the left hand nav, select APIs Under APIs & Auth, and select 'Google Maps JavaScript API v3'
Click the link and then Turn on the API
Go to Credentials under the APIs & Auth section, and click the red 'Create New Key' under the Public API access section. Then click Browser Key.
Make sure you include the star in your Website's name. For example, use mywebsite.com/*. This will ensure all pages are authorized to use the API.
Copy the key into your Javascript reference to the Google Maps API, like so:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
Long story short, the key is not required, but best practices would indicate that you should use the key.

Related

How Google Maps Api Key can work in my html?

I created a site with google maps online (in javascript) .I took an api key from Google Maps, but it doesnt work, because every time i open the browser i receive an image with a message that it cann't load correctly the Google Mps. Do you know, should i have done something with HTTP referrer or with API libraries in Google Map Api's Settings??
Google's new billing and pricing model requires you to add a credit card to use even the free API's. The documentation/tutorial page which shows code examples, will provide a key, however it will not work until you add your billing info.
If you are using the Javascript API for Static Maps, it is no longer free but you can use the $200 monthly credit being offered. It should allow you over 1+ million maps loads per month.
https://cloud.google.com/maps-platform/pricing/sheet/ https://developers.google.com/maps/documentation/javascript/tutorial

getting error using google maps api : This API project is not authorized to use this API

The google maps request is going to the Google Maps Api (javascript).
But I am getting this error message
And yes the google maps api is enabled and I have generated a key that I am using in my code.
But getting this error "This API project is not authorized to use this API", screenshot below
According to the recent changes announced on June 22, 2016
We now count Google Maps JavaScript API client-side requests towards the daily limit of the associated web service API.*
http://googlegeodevelopers.blogspot.com.es/2016/06/building-for-scale-updates-to-google.html
That means you have to enable Geocoding API in your project if you use geocoding service of Maps JavaScript API. If you use places library, you have to enable Places API and so on.
I am having this problem as well, but only on some pages within my site - on other pages, it works fine. All the pages which use the maps API use it in exactly the same way, via a shared javascript library.
I compared the network calls on pages with and without the error, and they appear to be 100% identical except for the Referrer URL (https://site.url/page/that/works vs. https://site.url/page/that/fails).
I have https://site.url in the "Accept requests from these HTTP referrers" list, and this functionality used to work on all the pages! It stopped working recently, perhaps as recently as this weekend, yesterday, or today.
Are you appending the maps script by hand on your website, or using a plugin? Can you send here your website URL?
Anyway, here it is how to append the API key:
Let's assume that you have the following piece of code
<script async defer src="//maps.googleapis.com/maps/api/js" type="text/javascript"></script>
To append the apy key, you must add ?key=YOUR_API_KEY at the end of the src path, like this:
<script async defer src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
If, instead, your src path already has some appended parameters (for example, "//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"), just add &key=YOUR_API_KEY at the very end:
"//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_API_KEY"
This is how you append the API parameter (obviously, replace YOUR_API_KEY with your API key code).
You can find more information on obtaining a google maps key at https://developers.google.com/maps/documentation/javascript/get-api-key
Your API key should be up and running within 5 minutes. Enjoy!
To make it work
we need to use Google Maps Geocoding Api and Google Maps Javascript Api
I was unfortunately using only the javascript one.
It's working fine now.

Google Maps API from localhost (already tried solutions answered to the possible original question)

I am trying to integrate Google Maps Javascript API with my Rails Web Application running on locally on a VM. I can't get the Javascript code from the API. The sample I am following is this.
https://developers.google.com/maps/documentation/javascript/tutorial?csw=1
And the error I receive while trying to load the code is this.
GET
https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap
net::ERR_NAME_NOT_RESOLVED
Note I am sending my actual key in the call to API.
Already tried solution provided to this question
Google Maps v3 api for localhost not working
It is possible to create a Browser API Key for test purposes that only works only for your machines IP or localhost. However make sure you do not deploy that to production :)
Just go to google developer console and and add one. I believe you can also add one for something like: *localhost*. I've done that before for some of their other services.
It depends on if you are using Google Maps API for "work" or not. See these docs:
If you're switching from the free API services to a Maps API for Work implementation, you must remove the key parameter from your requests.
Link to above quote: See section on Client ID

Cannot get Google Maps JavaScript API Key

I am attempting to use Snazzy Maps to implement a custom Google Map iFrame into my website, however I cannot retrieve an API key from the Google Development Console. The tutorial that Google provided follows an outdated interface.
After enabling the API I have no options or indications of where the key may be, I have three tabs "Overview", "Usage" and "Quotas" but no actual key...
Any ideas?
If you're on http://console.developers.google.com/ and selected your project, you should see a sidebar on the left side of the user interface. Below the API's menu item (underneath the section: APIs & AUTH) there should be an item called Credentials.
You can obtain your API credentials over there (API Key). Hope this will help.

Google Maps API authentication while forwarding over local network

I'm using fiddler to forward my local webserver over our local network to test on mobile devices etc.
static function OnBeforeRequest(oSession: Session) {
if (oSession.host.toLowerCase() == "192.168.1.100:8888") oSession.host="localhost:8020";
}
This works fine, except I can't get google maps to authenticate properly with my API key, the dreaded message:
Google has disabled use of the Maps API for this application. The
provided key is not a valid Google API Key, or it is not authorized
for the Google Maps Javascript API v3 on this site. If you are the
owner of this application, you can learn about obtaining a valid key
here:
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
I know the maps api is working on my local machine since I've added "localhost" to the allowed referrers section on the google api console.
I have tried adding my global ip to this list, localhost:8888, localhost:8020 etc. to no avail.
Is there a good way to track which referrer google is picking up so I can add it to my 'allowed' list? I've tried 'document.referrer' in JS, but that returns blank both on local(maps working), and local network remote access (through fiddler, maps not working).
I'm not using PHP, so something in JS would be ideal; I assume this is possible since the google maps API is added as javascript!
Any help would be appreciated, Cheers.
I tried alert(location.host), and it just returned my local ip + port (192.168.1.100:8888)
I was able to actually solve this by changing how the google api accesses my API key.
I was including the key in my JS call on my html page, this is apparently no longer necessary and when I removed it, it worked across LAN.
It now reads:
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false">
Note, all I needed in my Google API referrers section was what I had beforehand:
http://localhost/*

Categories