Adding and Configuring Google Maps for the Event App

Overview

The Google Maps component in the Event App Web Builder allows you to embed location maps directly into your event pages. This is useful for displaying venue locations, directions, or nearby points of interest, enhancing the overall user experience.

Using this component, you can easily add a map using an iframe code and customize its placement within your event page.

Step-by-Step Approach

1. Add the Google Maps Component

• On the Event dashboard, navigate to the Content module.
• Select Pages submenu.
• Open the required event app page in edit mode.
• Drag and drop the Google Maps component onto the desired section of your webpage.

2. Configure Google Maps

• Click on the component to open its settings panel.
• Enter or edit the following:
  • ID – Provide a unique identifier.
  • Title – Add a title for the map section.
  • Google Iframe Code – Paste the iframe embed code from Google Maps. The Google Maps iframe code is used within the Google Maps component to embed an interactive map directly into your Event App page.

3. Edit and Verify Map Display

• Ensure the iframe code is correctly added.
• Preview the page to confirm that the map loads and displays the correct location.

4. Reposition the Google Maps Component

• Drag the component to move it to a different section of the page.
• Ensure placement aligns with your page layout and improves usability.

5. Remove the Google Maps Component

• Select the component.
• Click on the Delete/Remove option.
• Confirm to remove it from the page.