---
title: "Google Maps Integration - EngageBox"
description: "Would you like to display a Google Map in a Popup that shows up when you click on a link? Let's see how to you can make that happen by utilizing the G"
url: "https://www.tassos.gr/docs/engagebox/integrations/google-maps"
date: "2026-04-06T20:30:16+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ EngageBox ](https://www.tassos.gr/index.php?option=com_content&view=category&id=35) / [ Integrations ](https://www.tassos.gr/index.php?option=com_content&view=category&id=55)

#  Google Maps Integration

 Google Maps Integration is available in Pro  Unlock this and dozens of other powerful features by upgrading to EngageBox Pro.

 [ Unlock this feature ](https://www.tassos.gr/joomla-extensions/engagebox/subscribe)

Would you like to display a Google Map in a Popup that shows up when you click on a link? Let's see how to you can make that happen by utilizing the Google Maps Embed Code feature and the [EngageBox iFrame Box Type](https://www.tassos.gr/joomla-extensions/engagebox/docs/the-iframe-box-type).

## [Step 1: Get Google Map Embed Code](#step-1-get-google-map-embed-code)

Google Maps can provide us with a code that can be used in any website to display any map. Follow the steps below, to get your map's code.

[![engagebox google map copy code](https://www.tassos.gr/images/engagebox_google_map_copy_code.png)](https://www.tassos.gr/images/engagebox_google_map_copy_code.png)

- Open [Google Maps](https://maps.google.com)
- Search for a location or click to open an existing map you'd like to embed.
- Click **Share** to open the Share window options.
- In the Share window click **Embed a map** and then click **COPY HTML**.

From the copied HTML we will only need the content of the *src* property. To do so, paste the copied HTML into a text editor such as Notepad and then mark and copy only the value of *src* property as shown in the picture below.

![engagebox google map code](https://www.tassos.gr/images/engagebox_google_map_code.png)

## [Step 2: Create a new iFrame box](#step-2-create-a-new-iframe-box)

EngageBox offers the iFrame Box Type which allows us to display external URLs into popups easily with the help of iFrames. The best thing with that box type is that it can load iFrames asynchronously ensuring no page load impact on our website.

- Open EngageBox component in the backend
- Click to create a new box.
- In the right sidebar select the *iFrame* box type from the respective dropdown.

After the page is reloaded, you will see the iFrame settings in the Content tab.

- In the *URL* option pase the *src* value you copied in Step 1.
- Optionally adjust the Height option
- Make sure the *Load Async option* is set to *After Box Open*. This will ensure the iFrame is loaded only after the box is opened.

To learn more about this box type, visit the [iFrame Box Type](https://www.tassos.gr/joomla-extensions/engagebox/docs/the-iframe-box-type) guide.

## [Step 3: Configure the box to show up on click](#step-3-configure-the-box-to-show-up-on-click)

Now, we need to set our box to open only when we click on a link on the page. To do so, follow the steps below:

- Go to the Trigger tab
- Select the *on Click* Trigger Point
- In the *Trigger Element* option you need to specify the class or the ID of the element that should trigger the box upon clicking.

Click to save your box.

 Google Maps Integration is available in Pro  Unlock this and dozens of other powerful features by upgrading to EngageBox Pro.

 [ Unlock this feature ](https://www.tassos.gr/joomla-extensions/engagebox/subscribe)

 Last updated on Jul 7th 2025 09:07

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "EngageBox",
            "item": "https://www.tassos.gr/docs/engagebox"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Integrations",
            "item": "https://www.tassos.gr/docs/engagebox/integrations"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Display Google Map in a Popup",
            "item": "https://www.tassos.gr/docs/engagebox/integrations/google-maps"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/engagebox/integrations/google-maps"
    },
    "headline": "Display Google Map in a Popup",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Tassos Marinos",
        "url": "https://www.tassos.gr/docs/engagebox/integrations/google-maps"
    },
    "datePublished": "2019-02-14T09:51:06+02:00",
    "dateCreated": "2019-02-14T09:51:06+02:00",
    "dateModified": "2025-07-07T09:53:53+03:00"
}
```