Using Google Map JavaScript library with cordova - javascript

I am trying to use Google map JavaScript API with a cordova project,
I am getting the map, after few seconds, I am getting RefererNotAllowedMapError for file:///android_asset/www/index.html
I tried to provide this URL on the developer console also, but no luck.
I tried to provide wild card asterisk symbol
Is there any other way to set a custom referrer or how to solve this?
---EDIT---
I was using Browser API key, I changed to Android API key now it works fine.
Wrong Value for cordova: https://maps.googleapis.com/maps/api/js?key=<browser api key>
Proper Value for cordova: https://maps.googleapis.com/maps/api/js?key=<android api key>
Browser API key seems to be only allowed when the html page is executed on a http url

As of May 2017, the issue has been solved by Google. Now you can use file:/ referrers with API keys. You can see the following text in the documentation
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
https://developers.google.com/maps/documentation/javascript/get-api-key#key-restrictions

Related

Add tinymce API Key in google app scripts

I had been trying to add TinyMCE in a Google App Scripts project. In order to do that I got an API key from TinyMCE and added domain http://script.google.com to the domain list for the key.
Then added the API key to using the code below -
<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=API"></script>
But when I tried to call the TinyMCE in that project HTML file, I got an error saying that -
The domain is not supported by your API key. Please review your domain settings here.
Snapshot of the error on the page for TinyMCE when page is loaded
a quick console.log(window.location) reveals that the hostname is something else. In my case it is n-4fcnzkskmuesjcsczo67y2qkpk3vxmg4aionr6i-0lu-script.googleusercontent.com
It could be a different hostname for you since I think any number of google servers could be serving your page.
So try adding googleusercontent.com to your API settings in TinyMCE.
I think this issue is with tinymce and not Apps Script. Try the answer provided in this tinymce forum which encountered the same error.
If you tried to use your API key before you added these other domains
the key is likely cached on our servers. The TTL is 4 hours so it may
just take some time for the other domains to be valid.
We will be enhancing the domain registration/addition process to flush
the cache when you make changes in an upcoming release of our cloud
environment.

angular google maps api key not getting passed

I am trying to use Angular google maps and I went through the quick setup supplied by angular google maps
.config(['$routeProvider','$locationProvider','uiGmapGoogleMapApiProvider,
function($routeProvider,$locationProvider,uiGmapGoogleMapApiProvider) {
// Other configurations
uiGmapGoogleMapApiProvider.configure({
key: ‘MY_GOOGLE_API_KEY’,
v: ‘3.17’,
libraries: 'weather,geometry,visualization'
});
}
]);
I setup an API key in Google API Console, but when I load the page i get an MissingKeyMapError.
Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
I have the Google Javascript API enabled in the API console. I am at a loss as to what I am doing wrong. Any help would be greatly appreciated.
I solved the issue. Turns out I was loading the Google Maps API v3 twice. I was loading it in the provider
uiGmapGoogleMapApi.then(function(maps) {});
and loading the script tag
<script src="https://maps.googleapis.com/maps/api/js"></script>
Once I removed the script tag, It worked!
Thanks for everyones help.
Make sure that you used a key parameter with a valid API key. Follow this link for the steps on how to get the proper API Key for your project.
Go to the Google API Console.
Create or select a project.
Click Continue to enable the API and any related services.
On the Credentials page, get a Browser key (and set the API Credentials). Note: If you have an existing Browser key, you may
use that key.
To prevent quota theft, secure your API key following these best practices.
(Optional) Enable billing. See Usage Limits
for more information.
But based from this thread, the problem was because of a stray script tag which was including the google maps api before using this library. You can also check this related SO question.
Hope this helps!

Google Maps API error: DeletedApiProjectMapError

I have to use google map. I use below google API script
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>
And i got below Error
Google Maps API error: DeletedApiProjectMapError https://developers.google.com/maps/documentation/javascript/error-messages#deleted-api-project-map-error
I created a New Project & New API key. But still this error came. Kindly help to solve this error.
Yo should go to https://console.developers.google.com and after create your API KEY, go to "Google Maps JavaScript API" and just ENABLE (by default is DISABLE)
You need to enable Maps JavaScript API for your website.
API link: https://console.developers.google.com/apis/library/maps-backend.googleapis.com?q=map
Based from this documentation, the DeletedApiProjectMapError means that your API project may have been deleted from the Google API Console. Please check the project for which you generated the API key that's included in JavaScript API loader.
Since you have already created a new API project and get a new key on the Google API Console, one workaround I found on this forum is to try deactivating all plugins to see if one of them is causing a conflict.
Check this related link. It states that:
I created new API keys in the first project for those maps again and deleted second project. The maps work partially now - without markers. It looks a little like manual blocking by someone on the Google maps side. Maybe someone is blocking access to Marker Manager .js file somewhere between my computer and a server where it is stored to ban my website.
Hope this helps!
I activate/enable more API Google Maps on https://console.developers.google.com and disappear this error.
You have deleted the project in google cloud platform of which you created an API.Regenrate Api by creating a new Project in google cloud platform.
There some answers saying the JavaScript API needs to be enabled as it is disabled by default. That seems to have changed. It was enabled by default in my account. It did not work anyway. I had to disable and reenable the API, then it worked.
Also it is to be noted that Google says it may take a couple of minutes upon creation until the API key works, that may also have been the thing.

Google api key not working [duplicate]

I am developing in JavaScript/HTML/CSS an app that uses Google Maps. I am getting the following alert dialog box:
"This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it. Error Code: InvalidKeyOrUnauthorizedURLMapError"
The app does actually display the map element; the alert is not a problem except it should not appear at all. The map displays properly.
I have gone in to the Google Developer's Console and, in the "Credentials" section, have "edited allowed referrers" to be mydomain.com/*
I have also gone in to the Google Developer's Console in the APIs section and enabled 11 Google Maps APIs.
After lots of referrer combinations, deleting and re-creating credentials i realized that i didn't enabled "Google Maps JavaScript API". What a shame. :)
For anyone who is having trouble to get google maps api work please check if the API enabled first.
After struggling a lot with this issue I've found 1 solution for me. It might help people who are searching for a proper and exact solution but not the comments, downvotes and links.
(Map was not displayed in my case.)
If suppose,the link of page where you are loading map is
http://example.com/abc/def/ghi/kpn.php
then give thesame(exactly the same) under Edit allowed references
If you try loading the same page using:
www.example.com/abc/def/ghi/kpn.php
or
http://www.example.com/abc/def/ghi/kpn.php
then your page is loaded but not your map, and this alert is generated.
CONCLUSION
Use the same path(Url address) at these 2 places.
While loading the page which has map.
Under Edit allowed references.
After following this I've got rid from this alert.
First you need to go to https://console.developers.google.com/ and select APIs.
In Google Maps APIs select Google Maps JavaScript API and make sure you enable API for Google Maps JavaScript.
Secondly, you need to create an API key:
Go to Credentials
Create new key and select Browser Key
No need to specify any referrers
So you should see Any referrer allowed after you save.
After a lot of trial and error this worked for me (by Eduardo. Thanks !)
The URL that needs to be authorized is the one in the Referrer header for the requests the browser sends to Google to load the API.
Under Browser Credentials > REFERERS
Add these
.example.org/
www.example.org/*
http://www.example.org
http://example.org
geocodezip provided the info i needed. I was indeed loading the googlemaps library twice: once in my index.html file and once in an iFrame. I changed my code so that the iFrame did not load the googlemaps library but, instead, used the parent. Thanks geocodezip!
Go to APIs menu and find "Google Maps JavaScript API" after you open it just press "Enable API"
I was able to get this to work by deleting all my referrers and allowing all. Apparently there is a bug in the developer console that is causing problems. Some people say that they can get referrers to work by deleting all then adding all back in at once instead of line by line:
https://productforums.google.com/forum/#!topic/maps/mSVyDazRMQo
Previous things I tried:
Regenerating Key
Setting all maps apis to enabled
Hard coding absolute paths of referrers
A side note, when I didn't include my api_key everything worked fined, though I'm sure they will eventually turn you off if you don't use your api_key.
What worked for me was to use Firebug in order to find the exact URL that made the request to the Google Maps API. As stated in Google Maps API documentation on troubleshooting authorization, "How to find the correct URL" part:
The URL that needs to be authorized is the one in the Referrer header
for the requests the browser sends to Google to load the API.
In my case, lets suppose I have a website example.com. In the developer console, under Google Maps API key, I've added many combinations of referrer such as example.com/*, *.example.com/*, example.com, but still the InvalidKeyOrUnauthorizedURLMapError persisted.
My solution, as I've mentioned, to use Firebug: open example.com and look for what was the referrer making request to https://maps.googleapis.com/maps/api/js?..., and it was http://example.com, and that is it. I've added http://example.com/* to the enabled URLs in the Developers Console under my respective API key and now everything works fine.
It is important to know where to look for on Firebug: it is the Net tab. Just click on the request to maps.googleapis ... and look for the Referer
I got it to work by exchanging the keys with my own special created keys AND reading this webpage a few times very carefully. My advice is to add or exchange your Google API Keys at https://console.developers.google.com/apis/credentials before embarking in very complicated scripting.
Insert your own API keys in the very first line of the Google Map javascript:
If you have been setup all configuration like api key etc, and you still got the error,
please enable all your mandatory APIs regarding to google maps.
Like:-
Google Maps Embed API
Google Maps Geocoding API
Google Maps Geolocation API
Google Maps JavaScript API

Google Maps won't work when API key is provided / This page was unable to display a Google maps element

I've been using google maps API V3 for a while now and it was working fine. Yesterday i tried adding Static Maps API to my application and i encountered an error where the image was either not displayed at all or i get an error saying 'InvalidKeyOrUnauthorizedMapError' which tells me something must be wrong with the api key i've been using, but i use the same key with other scripts in my application and they worked fine. I double-checked with developer's console and made sure the Static Maps API is activated and the key is correct. Then i removed the api key from the static image link request and it worked, but i noticed all my other scripts, using this key stopped working displaying these errors:
This page was unable to display Google Maps Element
and the console says:
UrlAuthenticationCommonError: https://developers.google.com/maps/faq#errorcodes .
Regenerating the api key didn't work. Removing the key or using a key from a different account with the same settings in developer's console solves the problem, but i need it to be under this account for billing purposes
TLDR; My application suddenly works only without API key or with a key from another google developer account with the exact same settings. What
may be causing the problem with this particular account?
I guess it was some bug with my account. I disabled and deleted all APIs and keys, re-enabled and re-created them and the problem was fixed.
I fixed,
In the console say to add a link in this format:
*.example.com/*
I changed to this:
*example.com/*
And it worked!

Categories

Resources