> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.komo.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Google Maps Card

> Instructions on how to embed Google Maps in your Engagement Hub.

## Watch it come to life

<iframe src="https://www.loom.com/embed/397c4f3fddb54575a76a0fc0c3cf6e01" title="Loom video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

## What is it?

Share locations and addresses on your Hub.

## How do I build one?

* [Step 1: Add a Google Maps Embed card to your Hub](#step-1-add-a-google-maps-embed-card-to-your-hub)
* [Step 2: Paste the link to the card](#step-2-paste-the-link-to-the-card)
* [Step 3: Publish the card](#step-3-publish-the-card)

### Step 1: Add a Google Maps embed card to your Hub

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/google-maps-card-step-1-add-a-step-2.gif?s=6be33d99ed2e4a1ab275dba63ce05942" alt="Google Maps Card: step 2 — Step 1: Add a Google Maps embed card to your Hub" width="2000" height="1100" data-path="images/google-maps-card-step-1-add-a-step-2.gif" />

* Navigate to your **Engagement Hub**.
* Once there, click **Add content,** from here select **Embeds** and then **Google Maps.**
* You will then see your new card has been added to your Hub.

### Step 2: Paste the link to the card

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/google-maps-card-step-2-paste-the-step-2.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=0beb3c3c747a0d30024d93f606c1c28a" alt="Google Maps Card: step 2 — Step 2: Paste the link to the card" width="2864" height="1478" data-path="images/google-maps-card-step-2-paste-the-step-2.webp" />

* Clicking on **Google Maps** will open the editing module.
* **(1)** Get the **embed code** and paste it here and a preview will appear below.

  <Accordion title="Getting Google Maps embed code">
    <Steps>
      <Step title="Find the address or place you want to embed on Google Maps.">
        Click on the **Share** button

        <img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/google-maps-card-step-2-paste-the-step-1.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=8d294b9feff24fd25a0c868e1163dace" alt="Google Maps Card: step 1 — Step 2: Paste the link to the card" width="1536" height="1152" data-path="images/google-maps-card-step-2-paste-the-step-1.webp" />
      </Step>

      <Step title="Choose Embed a map">
        <img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/google-maps-card-step-2-paste-the-step-1-2.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=68560ee810c28d69e1d9a0dfaa3f978e" alt="Google Maps Card: step 1 — Step 2: Paste the link to the card" width="1536" height="1152" data-path="images/google-maps-card-step-2-paste-the-step-1-2.webp" />
      </Step>

      <Step title="Choose the size and click COPY HTML.">
        <img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/google-maps-card-step-2-paste-the-step-2-2.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=2f3287ade6058e66c8b961a4390d15af" alt="Google Maps Card: step 2 — Step 2: Paste the link to the card" width="1536" height="1152" data-path="images/google-maps-card-step-2-paste-the-step-2-2.webp" />

        <Tip>
          The embedded Google Maps card will always try to stretch the map to fit the *width* of the card. Picking a different size here will just result in map cards with different *heights*.
        </Tip>
      </Step>

      <Step>
        <img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/google-maps-card-step-2-paste-the-step-4.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=6f4f52d60e85ac81d45446c6166dc171" alt="Google Maps Card: step 4 — Step 2: Paste the link to the card" width="1537" height="1152" data-path="images/google-maps-card-step-2-paste-the-step-4.webp" />
      </Step>
    </Steps>
  </Accordion>
* **(2)** You can optionally override the **card height** after pasting in the embed code.
* **(3)** You can add an **author** tag by displaying the brand or person who's responsible for the card content.
* **(4)** Add a **description** to the card.

### Step 3: Publish your card

<img src="https://mintcdn.com/komotechnologies/YBuAsk8OUeUukWbG/images/google-maps-card-step-3-publish-your-step-3.webp?fit=max&auto=format&n=YBuAsk8OUeUukWbG&q=85&s=8156a69fcb08e9033714cc12afd14481" alt="Google Maps Card: step 3 — Step 3: Publish your card" width="2874" height="1584" data-path="images/google-maps-card-step-3-publish-your-step-3.webp" />

**Once you've completed all of these steps and are happy with all the aspects, it's time to get your card live!**

* **(1)** **Publish** your card manually and instantly for the world to see.
* **(2)** **Schedule** your card to be published and unpublished at set dates and times.
* **(3)** Click on **...** to **Preview** and interact with the card on the front end from a user's perspective before publishing it.