Google Map Sections
Full Width Map
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 updated using the latest version 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:
Example
Map Attributes New
Map settings can now be controlled directly through a range of data attributes that are added to the .map-container wrapper.
Coordinates
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.
Example
Markers
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.
Example
Tooltips
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.
Example
Zoom Level
Set map zoom level by adding the data-zoom-level attribute to the .map-container wrapper and specify the preferred zoom level.
Example
Style
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".
Example
Multiple Maps New
You can now add as many maps as you require to a single page. Give each additional map a unique ID.
Example
Map Location Links New
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: