IMPORTANT: If you are using a ThememMountain HTML product other than Marquez v.1.0.5, Sartre v.1.0.2 or later, Warhol, Kant or Basho, check this page for the old map structure. This page will be available until all templates have been upated using the latest verison of the framework.
While our templates currently offer only one full width map section, they do offer the possibility to add a Google Map to multiple other sections such as Hero Sections or Grids.
A full width map section is created as follow:
Map settings can now be controlled directly through a range of data attributes that are added to the .map-container wrapper.
Set one or several map locations by adding the data-coordinates attribute to the .map-container wrapper and specify the latitude/longitude coordinates. Note: Multiple locations are entered as a multidimensional array.
Set one or several map markers by adding the data-icon attribute to the .map-container wrapper and specify the icon URL/s. Note: Multiple icons are separated by comma.
Set one or several tooltips by adding the data-info attribute to the .map-container wrapper and specify the tooltip text. Note: Multiple tooltip info is separated by comma.
Set map zoom level by adding the data-zoom-level attribute to the .map-container wrapper and specify the preferred zoom level.
Maps are by default displayed in color. Display the map in grayscale by adding the data-style attribute to the .map-container wrapper and add the value "greyscale".
You can now add as many maps as you require to a single page. Give each additional map a unique ID.
Switch between locations by using map location links. Location, marker and tooltip info is defined using the very same attributes as used for the map itself. You can add as many locaiton links as necessary but need to define which map they should control using the data-target-map attribue and specify its id. Each location link requires the class map-pan-link. Below is a working example: