Help Center
Specific Features Of Working With Google Maps
Watch this tutorial on how to add Google Maps, or read the guide below.
With the help of a website map, you can specify the precise company and its offices location, as well as build the detailed route.
How to add the map to the page
Open the Block Library, select the Contacts category, and choose any of such blocks as CN401, CN402, CN402A, CN403 or T143.
Click on the Content tab. In the Content of the block, find the Maps and Markers tab and click on it. Then select the Online map service. By default, two options are available: Google Maps and Yandex Maps.
In the "Map API key" field, specify the key that you need to create in advance in Google and Yandex services. In Zoom, you should specify the scale to be used for displaying the map. In "Markers", you need to add the coordinates of the point: latitude and longitude, separated by commas.
The Zoom field assigns the scale for the map from 0 to 19, where 0 displays the entire planet, and at 19 you can see streets and houses. By default, the value is 14.
In Google Maps, the closest appropriate scale is selected if not all points are visible at a specified scale.
In Google Maps, the closest appropriate scale is selected if not all points are visible at a specified scale.
How to add address to the Map marker
In the "Title" field, specify the name of the company / office / or starting point. Add latitude and longitude in the "Coordinates" field. You can do this with two options — copy data from an open source, or specify it directly on the map.
The title is used as a tooltip when hovering over the marker, as well as displayed in the tooltip when clicking.
What you can specify in additional settings of the marker
Additionally, for each marker you can select the behavior: show tooltip on click, show tooltip by default (on hover), and hide marker.
If you want to change the appearance of the marker, use the Marker Style field to select the options: icon or color marker. If you choose icon, upload any image. If you select color marker, specify the required marker color.
If you want to change the appearance of the marker, use the Marker Style field to select the options: icon or color marker. If you choose icon, upload any image. If you select color marker, specify the required marker color.
How to add route to the map
To build a route on the map, click on "Settings". In the list of block settings, select the "Route settings" tab. Select the "Connect markers" checkbox.
You can also customize the route — change the line size (width) and color.
You can also customize the route — change the line size (width) and color.
How to add the Google map key
To connect a Google map on your website, you need to get a JavaScript API key and specify it in the settings of the block with the map, and on the Google side, you need to link a payment card.
To start working in the Google Cloud Console, you need to create a billing account if you have not created it before and link a bank card. To do this, go to the Billing tab: https://console.cloud.google.com/billing
Go to the Overview tab and create a new project: click here.
Go to Tilda, add a block with the map (such as T143, the Other category), open the menu in the Content tab, specify the received key in the Google Map API Key field, include the address coordinates, save, and publish the page.
An important moment: Once you've added restrictions and changed the name of the API key, they will be in force within five minutes, and before this you can see an error in both editing mode and in the published page.
If Google map doesn't work
If you followed the guide exactly, the map should work correctly.
So if the map doesn't work — try once again. If it doesn't work anyway, go to the Google Cloud Console for API and check if you've activated the Google Maps JavaScript API — you'll find a green check next to the API Enabled text. If you can't find the check, click the Enable button.
So if the map doesn't work — try once again. If it doesn't work anyway, go to the Google Cloud Console for API and check if you've activated the Google Maps JavaScript API — you'll find a green check next to the API Enabled text. If you can't find the check, click the Enable button.
If you can't find Google Maps JavaScript API in the activated APIs (Enabled APIs), select the Google Maps JavaScript API in the list below, click on it, and click Enable.
Check also if the Billing account is connected to your project: click here.
How to change the map style
On Tilda, there are three map style settings — default, B&W light, and B&W dark. You can change these styles in the map block settings → Map style.
If these styles are not enough, you can use the Snazzymaps service and embed a map by yourself.
To create a map, you need to sign up for the website first.
To create a map, you need to sign up for the website first.
Once you've signed up, you need to go to the Build a Map link in the menu at the top of the website.
On the page that opens, you need to specify the name of the map and paste the Google Maps API key that you can get at this link.
Once you've saved, you need to select the map settings by using the four sections. In the first section, you can choose the map style, click the Choose a Snazzy Maps style button.
Once you've selected the map style and additional settings in the sections (adding markers, choosing language and size) click the View Code button to get the map code.
Copy the map code
Go back to Tilda and paste the code in the T123 HTML block from the Other category.
Once you've completed this, the map with a selected style will be added to the page.
