Using API key with google javascript directions API - javascript

I would like to be able to set the mode of travel when sending a request to the google javascript directions API i.e. train or bus. It requires an API key to be included when setting this option. I have an API key but what other settings do I need to change to make it work?
Do I need to add a specific website to the developer console?
and is the key included in the request itself or can it be included in the src part of the javascript with the maps URL? I've tried both options and it's not working.
https://developers.google.com/maps/documentation/javascript/directions?hl=en

Related

Google Map API key error "Your site URL to be authorized"

I have searched many links and read documents related to google api key, but every time I am getting the only error of Your site URL to be authorized
I am creating a PhoneGap hybrid application where I am not sure if which URL I have to pass to google api key referrer so I am stuck here
What I am using for google script is:
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=MY_API_KEY&sensor=false" type="text/javascript"></script>
Updated
I have already created Browse Key using google console but now What I have to pass in referrer link ( ? ) while I am creating a cordova application
I Dont know if this will help anyone but I spent a good hour trying to figure out this problem and ended up realizing I had the wrong API enabled.
You need Google Maps JavaScript API enabled.Also sometimes you need to specify https.
1.Leave it blank
2.You need to enable the google maps api for your project.
You need to enable the google maps api for your project.
if your API key have no limitation and it still not work - trying to add signed_in=true to url. It helps for me.
This error means that 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. (source: https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error)
Go to the Google Cloud credentials page to add your website url: https://console.cloud.google.com/projectselector2/google/maps-apis/credentials
Select the API key that you want to set a restriction on. The API
key property page appears.
Under Key restrictions, set the following restrictions:
Application restrictions:
To accept requests from the list of website that you supply, select HTTP referrers (web sites) from the list of Application restrictions.
Specify one or more referrer web sites. For example, *.google.com accepts all sites ending in google.com, such as https://developers.google.com.
Note: file:// referers need a special representation to be added to the key restriction. The file:// part should be replaced with __file_url__ before being added to the key restriction. For example, file:///path/to/ should be formatted as __file_url__//path/to/*. After enabling file:// referers, it is recommended you regularly check your usage, to make sure it matches your expectations.
Save your changes
You must include an API key with every Maps JavaScript API request. In the following example, replace YOUR_API_KEY with your API key.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
(source: https://developers.google.com/maps/documentation/javascript/get-api-key#restrict_key)

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.

What API Key is Google using when I load the JS script

I am loading the google maps/places JS API in my web app like this in my web/Ionic mobile app.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry"></script>
I am not providing an API key in that URL. What api key is google using? If different users use the web-app, will it use a seperate API key for each user? and therefore each user will have a limit on the requests as opposed to the entire app having the limit?
This is the angular directive using the API. It doesn't have a key defined in it.
https://github.com/kuhnza/angular-google-places-autocomplete
Thanks
What api key is google using? If different users use the web-app, will it use a seperate API key for each user?
No, Google API is not requires key. But key gives very useful information (read the link below). Key is unique for each app you use (if you register it in console). More detailed information can be found at Google Developer Console and at page: https://developers.google.com/maps/documentation/javascript/get-api-key
And therefore each user will have a limit on the requests as opposed to the entire app having the limit?
About limits in Maps Google wrote here:
https://developers.google.com/maps/documentation/javascript/usage

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/*

When is a Google Maps API key required?

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.

Categories