Map

The map banner module allows you to display a banner containing either an image or an embedded Google Map on a webpage, suitable for use on contact pages or location display pages.

Configuration Options:

• Enable Full Width:

  • Purpose: Choose whether the map banner should display in full width on the page.

• Banner Height:

  • Purpose: Set the display height of the banner.

    • Options:

      • Small

      • Medium

      • Large

• Map Image:

  • Purpose: When Google Map embed code is not provided, the map image will be used as a fallback display.

  • Action: Click the "Select Image" button to upload or select an existing image.

• Google Map Embed Code:

  • Purpose: Embed a Google Map into the banner to provide an interactive map feature.

  • Action: Paste the embed code from Google Maps into this text box, using the <iframe></iframe> format.

  • How to Get the Embed Code:

    1. Open Google Maps.

    2. Find the address or location you want to embed.

    3. Click the "Share" button on the left side of the page, then select "Embed map."

    4. Copy the provided iframe code and paste it here.

Usage Notes:

• Priority: If Google Map embed code is added, the map image will be ignored, and the embedded Google Map will be displayed.

• Embed Code Format: Ensure the embed code is in complete iframe format, or the map may not display correctly.

• Fallback Image: When the Google Map embed code is unavailable or fails to load, the fallback image will serve as a static map display, ensuring users can still view your location.

Common Issues:

• Map Not Displaying: If the map does not appear, check whether the embed code is correctly pasted and that it is enclosed in iframe tags.

• Image Not Displaying: If both embed code and an image are added, the embedded map will take priority. The image will only display if the embed code is removed.