How to Add Google Maps
Watch this tutorial on how to add Google Maps, or read the guide below.
Google has changed the rules for using Google Maps. To add a Google Map to your website, you now need to get a key for the JavaScript API, specify it in the settings of the map block, and link a band card to your Google account.
Go to the page:
https://console.cloud.google.com/google/maps-apis/overview.
Create a new project or select an existing one. Click on Create.
https://console.cloud.google.com/google/maps-apis/overview.
Create a new project or select an existing one. Click on Create.
Select Maps JavaScript API.
Activate the service by clicking on Enable.
Go to the "Credentials" tab and click on Credentials in APIs & Services.
Then click on Create Credentials and select API key in the drop-down list.
Click on Restrict Key in a pop-up window.
Select the "HTTP referrers (web sites)" checkbox, type your domain name in the referrer box to authorize the map, then select the "Restrict key" checkbox.
Tips and tricks: the entry https://tilda.cc/* is optional. It enables a map preview in Tilda Editor. Otherwise, a map will be accessible only via a domain link.
Once you have finished editing your website, remove the second entry for the security purposes. Learn more about how to secure an API key.
Once you have finished editing your website, remove the second entry for the security purposes. Learn more about how to secure an API key.
In the drop-down list, select Maps JavaScript API and save changes.
Note: Google Maps have recently changed their policy, so you now have to enable billing on your account before getting a key. Learn about Google Maps' pricing.
Go to the "Billing" tab to link a bank card to your account.
Once you are done, go to Credentials and copy the key.
Go to your project on Tilda, add a block with a map from the "Other" category to the page (for example, Т143), open the Content panel of the block, and paste the key in the "Map API Key" field. Save the changes and publish the page.
Troubleshooting
Q: I have entered the API key in the map block, but the map only appears on the published version of the page. In the editor, the error "Oops! Something went wrong" occurs. How do I solve it?
A: This error usually occurs after the API key has been restricted. To prevent a third party from using your API key on their website, we recommend that you should provide access only to your domain name. Learn more about how to secure an API key.
To enable a map preview in Tilda Editor temporarily, authorize https://tilda.cc/* on Google Maps Platform and revoke access later.
To enable a map preview in Tilda Editor temporarily, authorize https://tilda.cc/* on Google Maps Platform and revoke access later.
