Use the Google map element to add a Google map to your layout.

Locating the Google map element

To find the Google map element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Google map element.

The Google map element includes the following fields:

Map type

• Map type - Sets the type of map to display
  • Default - The default Google map style. See example.
  • Satellite - Map style based on high-resolution aerial photography. See example.
  • Hybrid - A mixture of illustrated map information and high-resolution aerial photography
  • Terrain - Map style highlighting terrain elevation
• Zoom level - Set the zoom level of the map. Values from 1 to 22, with 1 being fully zoomed out.

Default map marker

• Marker type - Set the style of marker to use
  • Default Google marker - Use the standard Google map marker
  • Custom image marker - Use a custom image for your marker in either .png or .svg format. Set the scale height and width of the marker.

Map controls

Set which map controls the user can interact with. The controls work in the following ways:

• Scroll wheel - Use the wheel of a mouse to scroll through zoom levels
• Map type control - Select a map type from Default, Satellite, Hybrid, Terrain
• Scale control - Able to control the scale of the map
• Draggable - The map can be dragged around within the Google map element
• Zoom control - Control the level of zoom.

Marker animation

• Animation - Set the animation style for the map marker elements
  • None - No animation style, markers will be static
  • Drop - Marker drops from top of map to its designated location point on load
  • Bounce - Marker will bounce up and down.

Custom map JSON

• Map JSON - Add in custom JSON to style your map differently to the Google presets.

Map aspect ratio

• Map ratio - Set the aspect ratio of the map. 

Custom style

• Layout style - Set a Custom layout style for the map container. To style the map itself, use the Custom map JSON field.

Match heights

• Match heights - Match the height of the element using:
  • None - Removes the match heights at the specific breakpoint
  • Class - Match the height of the element with another element with the same class name
  • Children with class - Match the heights of any child elements with the same class name
  • Child element - Match the heights of all child elements of the same type.

For more information on Match heights, see Match the heights of elements.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.

Google map element

Use the Google map element to add a Google map to your layout.

Important

The Google map will only display when it has at least one Google map marker.

Locating the Google map element

To find the Google map element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Google map element.

The Google map element includes the following fields:

Map type

• Map type - Sets the type of map to display
  • Default - The default Google map style. See example.
  • Satellite - Map style based on high-resolution aerial photography. See example.
  • Hybrid - A mixture of illustrated map information and high-resolution aerial photography
  • Terrain - Map style highlighting terrain elevation
• Zoom level - Set the zoom level of the map. Values from 1 to 22, with 1 being fully zoomed out.

Default map marker

• Marker type - Set the style of marker to use
  • Default Google marker - Use the standard Google map marker
  • Custom image marker - Use a custom image for your marker in either .png or .svg format. Set the scale height and width of the marker.

Map controls

Set which map controls the user can interact with. The controls work in the following ways:

• Scroll wheel - Use the wheel of a mouse to scroll through zoom levels
• Map type control - Select a map type from Default, Satellite, Hybrid, Terrain
• Scale control - Able to control the scale of the map
• Draggable - The map can be dragged around within the Google map element
• Zoom control - Control the level of zoom.

Important

If multiple pins are added to a Google map, the Zoom level will automatically adjust to make sure all pins are visible.

Marker animation

• Animation - Set the animation style for the map marker elements
  • None - No animation style, markers will be static
  • Drop - Marker drops from top of map to its designated location point on load
  • Bounce - Marker will bounce up and down.

Custom map JSON

• Map JSON - Add in custom JSON to style your map differently to the Google presets.

Important

For more information on styling your Google map see Google map styling wizard.

Map aspect ratio

• Map ratio - Set the aspect ratio of the map. 

Important

If you set a Map ratio and a Height using a style, the Height will be added to the Height of the aspect ratio. If you want to control the height entirely using a Style, set the Aspect ratio to None.

Custom style

• Layout style - Set a Custom layout style for the map container. To style the map itself, use the Custom map JSON field.

Match heights

• Match heights - Match the height of the element using:
  • None - Removes the match heights at the specific breakpoint
  • Class - Match the height of the element with another element with the same class name
  • Children with class - Match the heights of any child elements with the same class name
  • Child element - Match the heights of all child elements of the same type.

For more information on Match heights, see Match the heights of elements.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.