CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
bahri benguesmia
bahri benguesmia

Reputation: 21

Cordova google map key api error

I have a cross-platform app with cordova , but now the google map is not working. I have this error : 

MissingKeyMapError

I try to create new api browser key in google console with "*" authorization url , but still not working. i have this error : RefererNotAllowedMapError the window.location.href of my app is :file:///Users/bahri/Library/Developer/CoreSimulator/Devices/757EE924-9884-44B1-B‌​BF5-04CFF3D68C80/data/Containers/Bundle/Application/820BF808-DFF7-4AB0-8BF8-179D2‌​78E90D5/com.taxiwink.taxiwinkapp.app/www/index.html

How can I resolve this issue?

Upvotes: 2

Views: 1888

Answers (3)

lui
lui

Reputation: 440

As per today (15 Jul 2020) the following http referrers allows to show a Google map in a cordova app:

iOS:

__file_url__//var/containers/Bundle/Application/*
__file_url__//private/var/containers/Bundle/Application/*

(credit to yannisalexiou for having added the last one which works from iOS13)

Android:

__file_url__//android_asset/www/index.html#/*
__file_url__//android_asset/www/index.html

cordova simulate (eg: simulate ios --target=chrome)

127.0.0.1
localhost

the referrers go into the Google Console API management (API-Project, credentials, referres) at:

https://console.cloud.google.com/apis/credentials/key/abcxyz?project=api-project-123456

NOTE: developed from the answers here https://github.com/wevote/WeVoteCordova/issues/55

Upvotes: 4

Nicolas Adrian
Nicolas Adrian

Reputation: 568

You should empty the list of authorized HTTP Referers for your key, in the API Console. This should make the map succeed (after a 5-min propagation delay).

Related issues (it's suggested to "star" them to get an update on their resolution):

UPDATE

Good news, now you can use file:/ referrers. 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

Upvotes: 1

Destrif
Destrif

Reputation: 2134

MissingKeyMapError Error

The script element that loads the API is missing the required authentication parameter. If you are using the standard Maps JavaScript API, you must use a key parameter with a valid API key. If you are a Premium Plan customer, you must use either a client parameter with your client ID or a key parameter with a valid API key.

See the guide to API keys and client IDs.

From :

https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes

https://developers.google.com/maps/documentation/javascript/get-api-key

Also:

Registering authorized URLs

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 for Work Support Portal.
In the left-hand menu, click Maps: Manage Client ID.

You can add up to 100 URLs at a time, to a total of 3000 URLs. If you require higher limits, please contact support.

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/

Upvotes: 3

Related Questions