Elements and Widgets

Map

5min



Map is a widget that allows you to embed an interactive map to a web page. A map can be embedded using Google Maps or Yandex Maps APIs. 

Document image


In page editing mode, the widget looks like a stub block. The map is displayed only in preview mode or on the published site.

Preview mode
Preview mode




API key

For correct map display, you need to add an API key in the Project settings in the Dashboard.

To add a key:

Go to the Project settings via the Top bar menu

Document image


Open the Integrations tab

Document image


Add an API key in the Google Maps or Yandex Maps section.

Document image


For details about API keys, see: Google and Yandex Maps.



Map settings

You can customize a map using the options on the Settings tab in the right panel. 

Document image


Here, you will see a warning that you need an API key to work with maps. Also, you can follow the link to the project settings to add the key.

The following options are available in the settings:

  • Type of a map: Yandex or Google.
  • Map scale: zoom factor, specified as an integer from 1 to 21 (where 1 is minimum and 21 is maximum). The default map scale value is 18.
  • Language used on a map: Russian or English.
  • Center coordinates means longitude and latitude (in degrees) separated by commas.
  • Points on the map: you can add points of any objects on the map by specifying their name, description, and position. To do this, click on “+” and enter the required data.
Document image


You can add several points, edit, copy, and delete them.

Document image




Map styling

By default, the map widget has a height of 300px. You can change the styles of the element on the Styles tab in the right panel by specifying the desired size and position.

To view a map, go to the page preview or publish your project and open the published site.

Updated 05 Oct 2023
Did this page help you?