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.

Google Cloud Platform, the "New Project" page: the "Project name *" field and the "CREATE" button.

Select Maps JavaScript API.

Google Cloud Platform: the "Maps JavaScript API" card in the "Maps APIs and Services" section.

Activate the service by clicking on Enable.

In Google Cloud Platform, the "ENABLE" button on the "Maps JavaScript API" page in the API Library.

Go to the "Credentials" tab and click on Credentials in APIs & Services.

In Google Cloud Platform, the "Credentials in APIs & Services" link at the top of the "Credentials" section.

Then click on Create Credentials and select API key in the drop-down list.

In Google Cloud Platform under "Credentials": the "API key" option in the "+ CREATE CREDENTIALS" drop-down menu.

Click on Restrict Key in a pop-up window.

In the Google Cloud Platform console, the "RESTRICT KEY" button in the "API key created" 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.

In Google Cloud Platform under "Restrict and rename API key": select "HTTP referrers (web sites)", add domain URLs in "Website restrictions", and select "Restrict key" under "API restrictions".

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.

In the drop-down list, select Maps JavaScript API and save changes.

Google Cloud Platform: The "Maps JavaScript API" checkbox in the dropdown list and the "SAVE" button at the bottom.

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.

In the Google Cloud Platform console, the "Billing" item in the navigation menu on the left.

Once you are done, go to Credentials and copy the key.

Google Cloud Platform "Credentials" page: copy icon next to the key value under "API Keys".

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.

Block Content panel: Google Maps configuration fields including "ONLINE MAP SERVICE", "MAP API KEY", and geo point settings.

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?

Page editor: the "Content" button on the panel of the T143 block with a Google Maps loading error.

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.