Documentation: YOOtheme Elements
Location Map Element
The Location Map element shows an interactive 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.
The map is drawn by either Google Maps or OpenStreetMap, set with the Map Service option in the Settings tab. Google Maps needs a JavaScript API key, a Google Cloud project and a billing account. OpenStreetMap needs none of that and works straight away. See Map service below.
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. |
| Map Service | Draw the map with Google Maps or OpenStreetMap. The options below it change with your choice: an API key and Map ID for Google Maps, a map style for OpenStreetMap. |
| Google Maps API Key | Google Maps only. Overrides the global key from YOOtheme Pro's Customizer for this element only. |
| Map ID | Google Maps only. Optional Map ID for a custom-styled map, created in Google Cloud Console. |
| Map Style | OpenStreetMap only. The look of the map: OpenStreetMap, Humanitarian, Streets, Terrain, Light Gray, Satellite or Custom. See Map service below. |
| Tile URL | OpenStreetMap only, and only for the Custom style. The address of your own tile server, with the {z}, {x} and {y} placeholders, for example https://tiles.example.com/{z}/{x}/{y}.png. |
| Attribution | OpenStreetMap only, and only for the Custom style. The credit shown in the corner of the map. Nearly every tile server requires one, so check your provider's terms. The ready-made styles carry their own attribution. |
| 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. Worth keeping on for either service: both fetch the map from someone else's server, which means the visitor's IP address goes there. |
| Marker Icon / Marker Icon Height | A custom icon and its display height for all markers that don't set their own. Without one you get the default marker of the service you picked. |
| Panel Position | Place the location list Right (default) or Left of the map, or Top or Bottom across the full width. See Panel position below. |
| Panel Style / Padding | Give the panel itself a boxed card or tile style (Card or Tile, in Default, Muted, Primary or Secondary) and set its padding. |
| Panel Column Width / Max Height | Width of the panel column (Small 150px through 2X-Large 750px) and an optional maximum height in pixels. Both apply only when the panel sits beside the map, so they are disabled for the Top and Bottom positions. |
| Panel Columns / Columns Breakpoint / Columns Gap | Only for the Top and Bottom positions: how many columns the locations are laid out in (One through Sixths), from which device width those columns apply, and the gap between them. |
| Location Style / Padding | Give every location its own boxed card or tile instead of a plain list row, and set its padding. Works in every panel position, and is what turns a full-width panel into a row of cards. |
| 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-item-content, .el-title, .el-address, .el-phone and .el-link are prefixed automatically. |
Map service
Both services show the same locations, the same list, the same popups and the same options. They differ in what you have to arrange before the map appears.
Google Maps
Google Maps needs a JavaScript API key. Set one globally under YOOtheme > Customizer > Google Maps, or enter a different key for this specific element in the Settings tab. The key belongs to a Google Cloud project with billing enabled; without a key the element shows a warning instead of a map.
OpenStreetMap
OpenStreetMap needs no key, no account and no billing. Pick it under Map Service and the map works immediately. Choose the look with Map Style:
| OpenStreetMap | The familiar OpenStreetMap look. The default. |
| Humanitarian | The Humanitarian OpenStreetMap style, lighter and higher in contrast. |
| Streets | A road map. |
| Terrain | A topographic map with relief. |
| Light Gray | A muted grey base map that lets your markers and your own colours stand out. Stops at zoom level 16, so a higher Zoom on Click simply stops there. |
| Satellite | Aerial imagery. |
| Custom | Your own tile server, set with Tile URL and Attribution. |
Every ready-made style works without an account, and each carries the attribution its provider requires, shown in the corner of the map. Leave that credit in place; it is a condition of using these maps.
One thing to keep in mind on a busy site: the OpenStreetMap and Humanitarian styles run on servers funded by donations, and their usage policy is written for light traffic. A site with real visitor numbers is better off on one of the other styles, or on its own tile server through the Custom option.
Markers
Without a Marker Icon, Google Maps shows its own red marker and OpenStreetMap shows a red pin drawn by the element. Set a Marker Icon on the element, or on a single location, and both services show that image instead, at the height set by Marker Icon Height.
The built-in OpenStreetMap pin follows three CSS custom properties, so you can restyle it without replacing it with an image. Put this in the element's CSS field:
.el-locationmap-marker-pin {
--el-marker-color: #1e87f0;
--el-pin-width: 32px;
--el-pin-height: 47px;
}Panel position
Beside the map (Right or Left) the panel stays a fixed-width column with the locations underneath each other, which is what Panel Column Width and Max Height are for.
Above or below the map (Top or Bottom) the panel spans the full width and the locations become a grid, so that layout gets its own Columns, Columns Breakpoint and Columns Gap instead. Column Width and Max Height mean nothing for a full-width row and are disabled there.
Combine Bottom with a few columns and a Location Style to turn the list into a row of location cards under the map.