Skip to main content

Map

The Map element displays a map with markers and popups. It has a Location, Title, Meta, Content, Image, Link, Marker Icon and Cluster Icons fields. By default OpenStreetMap is used. To use Google Maps, set the Google Maps API key in the External Services settings of YOOtheme Pro.

Type

The Map element is available as a roadmap and a satellite map.

Roadmap

Satellite

Zoom and Controls

Set the zoom level, display map controls and enable map zooming and dragging. Additionally, define the maximum and a minimum zoom level of the map.

No Zoom and No Dragging

Controls

Size and Style

The Map element has several options to define its size. Set a fixed height in pixels or adapt it to the viewport. If no width is set, the map takes the full width. If both width and height are set, the map is responsive like an image. Additionally, the width can be used as a breakpoint. The map takes the full width, but below the breakpoint it will start to shrink preserving the aspect ratio. If Google Maps are used, there are additional options to style the map.

Custom Markers and Clustering

Select a custom icon for the map markers. Enable marker clustering to simplify the display of a large number of markers on the map. Optionally, select a custom cluster icon.

Marker Popups

Display a popup when clicking a map marker. Set the max width for the popup and optionally define which popup is opened on load.

More Settings

Options for the different content fields are very similar across all elements. They are described in the corresponding Headline, Text, Image and Button element documentation.