Google Maps API error: RefererNotAllowedMapError on play store

Question

It has many answers online but still I am dumb enough to crack it myself :(.

I have an Ionic hybrid app (Ionic, angular and Visual Studio). Development is almost done and working fine. I have signed my app using .keystore certificate. I have also generated an API key in Google Console and gave it restriction on HTTP Referrers (Web Site).

On my local (dev environment), it stopped working. So I added http://localhost:4000/index.html#find (or even localhost) as referrer to API key. This fixed the problem and now it is working fine.

However my app is not working in android device. I am not sure what should be the referrer URL there. As a trial, I debugged my device using visual studio. Following is the error that I tracked.

Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: file:///android_asset/www/index.html#find

However adding file:///android_asset/www/index.html#find as referrer is not solving the problem. To me it looks expected as they are pointing to raw file to my system (as I am debugging). So, what should be the value of this to make all devices work after I add my app to play store?

Do it has to come from manifest.xml or my app project? Or do I need to mention this somewhere in Google Play Console? Could anyone please guide me?

Answer 1

The file:/ referrers are not supported in Cloud developer console at the moment.

You can consider two options:

1. Use a different API key without HTTP referrer restrictions
2. Purchase Premium plan where file:/ referrers are supported with client IDs.

There is an issue 9996 in the public issue tracker regarding referrers with file:/// protocol. I would suggest starring the issue to express your interest and receive further updates.

UPDATE

Good news, Google has added support for 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