Using Enhanced Google Maps in your landing page and/or website design requires a Google Maps API key, the enabling of 4 APIs, and a billing profile set up.
1. Create your Google API key(s)
To set up a Google Maps key, click here to get started.
Note: You must have an existing Google account to get started.
Once you are logged in, create a project, set up a billing account, and an API key should be generated.
It will look something like this: AIzaSyAa_ydj8A4mxymMDXXXXXXX
This is the API Key that should be sent to DevHub.
2. Enable the Maps APIs
Under the access for your API key, enable the following APIs in the Google API console:
- Geocoding API
- Maps Javascript API
- Maps Static API
- Places API
3. Enable Billing
For the keys to work, enable or connect a billing profile to the project under the Google API console.
Restricted Access (Optional)
We recommend that the API key has no restrictions if it will be used on a number of different domains. However, if restrictions are desired for the key, follow these additional steps:
- Add *.cloudbackend.net and localhost:8001 to the allowable list, in addition to your other domains that you want to restrict the key to.
- A second key should be set up that is unrestricted, and only has the Geocoding API enabled. It is necessary for the key with the Geocoding API to be unrestricted for the geolocation to function properly. This key will only be used on the backend, and is not publicly accessible.
Debugging Map Errors
If there are problems with the display of Google Maps, you will see errors related to this on the maps themselves, as well as in the browser console. You can use these console errors as a hint to what is wrong and how to resolve it.
Example error:
Example of same error in the console:
You may also see the following, showing "for development purposes only":
This indicates that there is a billing issue on the account that needs to be resolved.
List of common errors:
| Error | Reason |
| BillingNotEnabledMapError | This happens when billing (and adding a valid payment source) has not been completed on the Google API account. |
| RefererNotAllowedMapError | Commonly happens on preview URLs. This means the API key was restricted and the current domain is not on the authorized list. |
| ApiNotActivatedMapError |
This happens if not all the required APIs were enabled for the API key |
A full list of errors can be found through Google here.