The Google Map row displays an interactive map of a location through a variety of layout styles — two options that present as a large feature, two options with side-by-side content areas and one option that is fully edge-to-edge.
- Highlight a location to help visitors navigate to an office or event.
- Highlight a popular campus location.
Note: This row only accepts Google Maps location embed code.
Create a New Row
- Select your rows storage folder — this is likely labeled _rows or similar. If you don't have one yet, build one now.
- From the top menu, select Add Content > Rows > Google Map.
These fields appear in each layout option for this row:
- Page Name: Required field; this is your row's file name in Cascade; customize the default name of row-google-map.
- Title: Required field; used as a section header for screen readers and should be meaningful.
- Show Title?
- If unchecked: The title is used by screen readers but not visually displayed.
- If checked: The title is prominently displayed at the top or above the text side of the row.
- The Edge-to-Edge layout does not visually display the title, regardless of this setting.
- Row Theme: Select one of the available colors as the row's default theme. Elements within the row will be color-coordinated and optimized for design and accessibility. When placing the row on a page, the theme can be customized for that page. The Row Theme setting does not impact the appearance of this layout.
- Embed Layout: Select one of the available layout options - Feature, Wide Feature, 50-50, 50-50 Large or Edge-to-Edge. See layout details and additional fields, below.
- Embed: Fill in the required Embed Code field. To get the code, follow these steps:
- Search for the location on Google Maps.
- Select 'Share' on the location's information panel.
- Select the 'Embed a map' tab.
- Select 'Copy HTML' to copy the embed code to your clipboard. Note: The embed size in Google Maps has no impact on your embed row — this setting can be ignored.
- Paste the HTML code from your clipboard into the Embed Code field in Cascade.
Choose one of the available layout options - Feature, Wide Feature, 50-50, 50-50 Large or Edge-to-Edge. You can edit the row at any time to switch to a different layout.
Feature & Wide Feature
Presents the optional title and intro text above a large (Feature) or larger (Wide Feature) Google Map embed, with an optional link below. All elements are centered within the row.
50-50 & 50-50 Large
Two side-by-side content areas of equal size — one presenting the Google Map embed as an inset map (50-50) or as a large edge-to-edge element (50-50 Large), the other a title, text and linked button.
A large format presentation that extends the full width of the browser window for a Google Map embed with no title, text or additional links displayed. The Row Theme setting does not impact the appearance of this layout.
Tip: If you need to include more than one Google Map row on a page, do not select embed layouts where edge-to-edge map content will be adjacent to other edge-to-edge map content.
Updating Row Content
- To update the content of a row, edit and publish the row file.
- You do not need to publish the pages displaying the row.
- If a row is unpublished or deleted, it will no longer appear on any live pages.
Example Google Map Rows
Below, we offer sample rows to demonstrate suggested uses and best practices.