I have a freshly installed DXA site, and on the home page the map is not displayed, because the request to the Google Maps API returns a 403 status.
I have created an API key and it is visible at https://console.developers.google.com/apis/credentials
I have added this key to the Site Configuration Component and published the settings. When I inspect the failed request to maps.googleapis.com, this is what is provided as the "key" parameter.
What am I doing wrong?
First indeed you have to confirm that your key is being used, i.e. is written out in the query parameter key on the static map request. You can view the source of the home page and should see something like this:
<img src="//maps.googleapis.com/maps/api/staticmap?center=51.52381,-0.158441&zoom=15&size=311x160&markers=51.52381,-0.158441&key=[YourGoogleMapsApiKeyHere]" alt="Head Office - London">
This API key should have at least the following products enabled:
If you have done that, then also ensure the domains in which you use the key are enabled. You can check this in the API Manager under Credentials. If you select your API Key there, you might see some domains listend under Accept requests from these HTTP referrers (web sites). Make sure you add your live and test domains there, I always make sure I at least add the following domains:
localhost:*/*localhost/*In this particular order, so that I ensure my debugging sessions always go fine too. But either list no domains, or make sure you list anything that you use to request your site.
If that is done, then within 5 minutes everything should work, for errors, check the console log of your browser.
You can see the list of enabled APIs for a given project/key in your dashboard https://console.developers.google.com/apis/dashboard
