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 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 example 1
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
								
									

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:

Example