Map 

Layers Panel
Variables
Symbols
Pop-up Builder
Media Manager
Figma to Kirki
API Integrations
Review and Publish
Layers Panel
Variables
Symbols
Pop-up Builder
Media Manager
Figma to Kirki
API Integrations
Review and Publish

The Map element allows you to embed interactive maps into any of your web pages. Kirki offers two map elements – Open Street Map and Google Map.

Adding a Map Element

To add a map element to your page:

  1. Open the Insert panel from the Left Sidebar.
  1. Select Media from the Elements section.
  1. Click or drag either the Open Street Map or Google Map element onto the canvas.

Configure Open Street Map

Once the Open Street Map element is on the canvas, navigate to the Design tab on the Right panel to configure it:

Set the Location

Search for the name of the location you want to display on the map and select the desired result from the dropdown.

Zoom

Define the initial magnification level of the map. A value of 0 displays a wider area while a value of 100 provides a more detailed view. Drag the slider or enter a value manually.

Style

Choose from 7 different styles to set the visual appearance of your map.

Zoom Buttons

Enable or disable the zoom-in and zoom-out buttons on the map.

Street Button

Enable or disable the street view button.

Full Screen Button

Enable or disable the full-screen button.

Draggable

Enable Draggable to let users drag and pan around the map.

Show Marker

Enable to display a geotag marker pointing to the specified location.

Configure Google Map

Once the Google Map element is on the canvas, navigate to the Design tab on the Right Panel to configure it:

Set the Location

Search for the name of the location you want to display on the map and select the desired result from the dropdown.

Zoom

Define the initial magnification level of the map. Drag the slider or enter a value manually.

Style

Choose from 2 different styles to set the visual appearance of your map.

Styling Your Map

You can further style your map element using the options on the right panel. Learn More about Right Panel.

Was this page helpful?

Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.