Map Settings
Choose OpenStreetMap or Google Maps, pick a map style, and configure up to 10 map locations for use across the site.
Map Settings controls every map in Highend: the Map and Fullwidth Map elements, the [HB-Themes] Map widget, the header map dropdown, and the Contact page template. It sets which map provider they use and holds the locations they draw markers from.
Where to find it: Go to HighendHighend OptionsMap Settings.
Choose a map provider
Highend can draw maps with either of two providers:
- OpenStreetMap is free and works without any setup: no account, no API key, no billing. Maps come from OpenFreeMap in a Light or Dark style.
- Google Maps needs a Google Maps API key, and Google requires billing to be enabled on the key's project.
Sites that already have a Google Maps API key keep Google Maps after updating to 4.5.1. Sites without a key use OpenStreetMap. You can switch at any time with Map Provider.
Global map settings
OpenStreetMaphb_map_providerOpenStreetMap (free, no API key) or Google Maps (needs an API key). Applies to every map on the site. The default is Google Maps if you already have an API key saved.
Lighthb_map_styleLight or Dark map colors. Only shown when Map Provider is OpenStreetMap. The Map and Fullwidth Map elements and the Map widget can each override it with their own Map Style setting.
Emptyhb_gmap_api_keyYour Google Maps API key. Only shown when Map Provider is Google Maps. Create a key in the Google Cloud Console and enable the Maps JavaScript API for it. Without a valid key, Google Maps shows an error box instead of the map.
16hb_map_zoomZoom level from 1 (whole earth) to 18 (street level).
48.856614hb_map_latitudeLatitude the map centers on when an element uses the global location instead of its own coordinates.
2.352222hb_map_longitudeLongitude the map centers on when an element uses the global location instead of its own coordinates.
Offhb_enable_custom_pinReplaces the default map pin with your own image, on every marker. This covers the Map and Fullwidth Map elements (unless an element sets its own Custom Pin Image), the Map widget, and the header map.
Emptyhb_custom_marker_imageThe marker image to use, shown at its actual size. Only appears when Custom Marker Image is on.
Onhb_enable_map_colorWith Google Maps, tints the map's roads and water using Map Focus Color. With OpenStreetMap, colors the map markers with Map Focus Color instead (the map itself keeps its Light or Dark style).
#ff6838hb_map_focus_colorAccent color used when Enable Styled Map is on.
Onhb_enable_map_buttonsShows zoom controls and allows double-click-to-zoom on the header map and the Contact page template map. When off, those maps are display-only. The Map and Fullwidth Map elements always show zoom controls.
Locations 1–10
Below the global settings, Highend gives you up to 10 saved locations, each with its own coordinates and an info box shown when a visitor clicks its marker. Location 1 is always available; Location 2 through Location 10 each have a toggle that reveals their fields once turned on.
48.856614hb_map_N_latitudeLatitude for this location, where N is the location number (1–10).
2.352222hb_map_N_longitudeLongitude for this location.
Enter your info here or leave it empty.hb_location_N_infoContent shown in the popup when a visitor clicks this location's marker on the map. Basic HTML such as <strong> and <br> works. Leave it empty to show no popup.
Use the LatLong converter linked in the panel to turn a street address into coordinates.
A Map or Fullwidth Map element normally shows a single marker using its own latitude and longitude. Set its Use values from Highend Options > Map Settings option to Yes, and it plots every enabled location (1–10) at once, each with its own info box, useful for showing multiple offices or store locations on one map. The header map always shows all enabled locations.
How maps load
Highend only loads map code on pages that show a map, and only for the provider you picked. A map loads its library when it's about to scroll into view, so maps further down a page don't slow down the first paint. The header map loads when a visitor first opens it.
With OpenStreetMap, each map shows its credits ("OpenFreeMap © OpenMapTiles Data from OpenStreetMap") for a few seconds, then collapses them to a small i button. OpenStreetMap's license requires the credits to stay reachable, so the button can't be removed.