I'm using manual Google API loading, as in the docs.
A snippet from my index.html:
<div id="app"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
<script src="/bundle.js"></script>
where MY_KEY is a hardcoded key which I generated for the project.
However, when using geolocation, by tracing the outgoing requests, I noticed that a different API key is used: AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw which looks like a generic key as it is floating all around the web.
As a result, most of the time the API is unavailable, e.g. at later times of the day it replies with:
"domain": "usageLimits",
"reason": "dailyLimitExceeded",
"message": "This API requires billing to be enabled on the project. Visit https://console.developers.google.com/billing?project=77185425430 to enable billing.",
"extendedHelp": "https://console.developers.google.com/billing?project=77185425430"
I have not found this API key in the library code itself nor in the window.google object, so I'm a bit puzzled where does it actually come from...
But most importantly, how can I enforce the use of my key?
EDIT:
The same issue is present the demo site: https://fullstackreact.github.io/google-maps-react/
The API key in the source of the page is: AIzaSyAyesbQMyKVVbBgKVi2g6VX7mop2z96jBo
While the one being actually used for queries is:
Chrome: AIzaSyBOti4mM-6x9WDnZIjIeyEU21OpBXqWBgw
Firefox: AIzaSyD_Drzahe4dBzGCZ9ArvowCvrPx_yFrlCM
Apparently it's an expected behavior in case of the geolocation service at least. There are standard browser keys being used for those requests.
I haven't found the source of the daily usage limit error, however I'm not observing it anymore in the final version of the app.