Thanks to the
Map element, adding a Google Map to Bricks is easy. The biggest hurdle is creating the Google Maps API key. This article will show you how to create an API key and how to prevent unauthorized use by setting API and application restrictions.
As soon as you have completed the setup, you will find your API key under Keys and Credentials » API Keys.
Copy and paste the key into Bricks » Settings » API keys » Google Maps: API key and hit save.
Now, you can use the “Map” element on any page. If your map doesn’t show properly, inspect the developer console for more information.
API and application restrictions
We recommend restricting where and for which APIs the API key can be used to prevent unauthorized use.
Since you’re running a website, restrict the API key for websites only. Select “Websites” and add your URL by clicking the “Add” button. Here are some examples of URLs that you can allow to set up a website:
- Any URL in a single domain with no subdomains: https://example.com
- Any URL in a single subdomain: https://sub.example.com
- Any subdomain in a single domain, using a wildcard asterisk (*): https://*.example.com
- A domain and all its subdomains, using a wildcard asterisk (*):
Save your API key settings.
If the map is not showing, open the developer console. You will receive further information and how to solve your specific issue there. In most cases, no billing account is assigned, the necessary APIs are not activated, or the restrictions are incorrect.