Documentation: YOOtheme Elements
Location Map Element
The Location Map element shows an interactive Google Map with a list of locations next to it. Visitors can click a location in the list to zoom to it on the map, or click a marker to highlight it in the list.
In the YOOtheme Builder, open the element picker and look for the Joomill Extensions group of elements, then select Location Map.
You need a Google Maps JavaScript API key for the map to load. Set one globally under YOOtheme > Customizer > Google Maps, or enter a different key for this specific element in the Settings tab.
Content tab
| Locations | Add one or more locations. Each is its own item with a position, title, address, phone and link. |
| Address / Phone / Link | Show each field in the location list, in the map popup, or both. |
| Link Text | Default link text used when a location doesn't set its own. |
| Reset Button | Show a button that clears the selected location and zooms back out to show every marker. |
| Reset Button Text | Text for the reset button. |
| Placeholder Image | Image shown in place of the map before a visitor accepts loading it (see Consent below). |
Location item
| Location | Pick the location on a map or enter coordinates. |
| Title | The location's name. |
| Address | The address, shown as entered. |
| Phone | Phone number for this location. |
| Link / Link Text | Optional link, with an optional link text that overrides the element's default. |
| Marker Icon | Optional custom marker icon for this location, overriding the default marker icon. |
| Hide this location | Hide this location from the list and the map without deleting it. |
Settings tab
| Column Gap / Divider / Alignment | Space and dividers between the map and the location panel. |
| Google Maps API Key | Overrides the global key from YOOtheme Pro's Customizer for this element only. |
| Map ID | Optional Google Maps Map ID for a custom-styled map, created in Google Cloud Console. |
| Map Height | Map height in pixels. |
| Fit Markers | Automatically fit the map so every marker is visible. When off, set a fixed Zoom level instead. |
| Zoom on Click | Zoom level applied after clicking a marker or list item. |
| Consent | Require the visitor's consent before the map loads, showing the Placeholder Image until they accept. |
| Marker Icon / Marker Icon Height | A custom icon and its display height for all markers that don't set their own. |
| Panel Style / Padding / Column Width / Max Height | Style the location panel next to the map, and set its width and maximum height. |
| List Style / Size / Icon / Icon Color / Icon Width / Icon Height / Vertical Alignment | Style the location list rows and the marker icon shown next to each one. |
| Title Style / Outline Text / Decoration / Font / Color / Hover Effect / HTML Element | Style the location title in the list. |
| Address & Phone Style / Color / HTML Element | Style the address and phone text in the list. |
| Link Style / Size | Style the location link in the list. |
| Button Style / Size | Style the reset button. |
| Position, Margin, Max Width, Alignment, Animation, Visibility | The usual layout options shared by all Builder elements. |
| CSS | Custom CSS for this element. Selectors .el-element, .el-locationmap-inner, .el-panel, .el-list, .el-item, .el-title, .el-address, .el-phone and .el-link are prefixed automatically. |