Skip to main content

How do I Add and Configure Google Maps for a Web Page on the Web Builder?

Azavista Support
Updated

Adding and Configuring Google Map Webpage

Overview

The Google Maps component allows users to embed an interactive map on a webpage to display event locations or venues. Using the Web Builder, users can add and configure the Google Maps component by defining titles, dependencies, accessibility text, and the Google Maps embed code. This article explains how to add and configure the Google Maps component on a webpage using the Web Builder.

Step-by-Step Approach

1. Access the Web Builder

  • On the Event dashboard, go to the Content module.
  • Select the Pages submenu.
  • Open the required webpage in edit mode.

2. Drag and Drop Google Maps

  • From the component panel, locate the Google Maps component.
  • Drag and drop the Google Maps component into the desired section of the webpage.

3. Enter or Edit the Component ID

  • Select the Google Maps component.
  • Enter or edit the ID field in the settings panel.
  • The ID can be used for navigation, styling, or tracking purposes.

4. Enter or Edit the Title

  • Enter or update the title displayed for the Google Maps component.

5. Select Dependency from Dependency Select Field

  • Select a dependency if required.
  • The Google Maps component displays or hides based on the selected dependency conditions.

6. Select Section Version Type

  • Select the appropriate option from the Section Version Type select field.
  • This controls which version of the Google Maps component is displayed.

7. Enter or Edit Alt Text

  • Enter or update the Alt text for the Google Maps component.
  • Alt text improves accessibility and provides descriptive information.

8. Enter or Edit Google Iframe Code

  • Enter or update the Google Maps iframe embed code in the provided field.
  • Ensure the iframe code points to the correct location and is valid.

9. Manage the Google Maps Component

  • Reposition the Google Maps component using drag-and-drop within the page layout.
  • Remove the Google Maps component if it is no longer required.

10. Save and Apply Changes

  • Save and publish the webpage to apply the Google Maps configuration.
  • Preview the webpage to confirm the map displays and functions correctly.

Related to

Related articles