---
title: "How to Tag The Google Map Widget for Figma to Elementor?"
url: https://uichemy.com/docs/tag-the-google-map-widget-for-figma-to-elementor/
date: 2023-09-21
modified: 2026-04-14
author: "Sagar Patel"
description: "Are you using Google Maps in your Figma design to show addresses? Then you can tag that element as an Elementor Google Maps widget using the UiChemy plugin. So when..."
image: https://uichemy.com/wp-content/uploads/2023/05/How-to-Tag-The-Google-Map-Widget-for-Figma-to-Elementor_-min-1024x536.jpg
word_count: 307
---

# How to Tag The Google Map Widget for Figma to Elementor?

## Key Takeaways

- UiChemy allows tagging a frame or image as an Elementor Google Maps widget in Figma designs.
- Users can choose between the Step by Step Method or Express Conversion for tagging widgets.
- Tagging requires adding an active Google Maps API key in Elementor for the Google Maps widget to function.

Are you using Google Maps in your Figma design to show addresses? Then you can tag that element as an Elementor Google Maps widget using the UiChemy plugin.

So when you export the design as an Elementor template, that particular section will use the Google Map widget. 

## What Can be Tagged?

A frame or an image can be tagged as a Google Maps widget.

## How to Tag?

To do this, you can choose between two options: **Step by Step Method** or **Express Conversion**.

Here, we’ll go with the **Step by Step Method**.

- First, select the **Step by Step Method **and click on the** Start **button.

- Select the top-level page or frame of your layout, then click on the **Next **button.

- Under the **Widget Tagging Mode** tab, select the **Manual Widget Tagging** Option.

- Next, under the **Manage Auto Layout** tab, you’ll see two options:** *It’s already in Auto Layout*** and ***Convert to Auto Layout***. We’ll go with the **first option**.

- After that, under the **Tag Widgets** tab, choose the frame or container that contains your element (Widget). Then, search for the **Google Map** widget in the UiChemy panel and select it. Here, you’ll see [all the supported Elementor widgets](https://uichemy.com/docs/widgets-compatible-with-figma-to-elementor-conversion-in-uichemy/).

Then you’ll see widget-specific tagging options, and most of the options will be auto-filled based on your design.

- In the **Location** field, you have to add the address, or you can leave it blank for Google Maps to use the default location.

- From the **Zoom **field, you have to select the Zoom level.

- Once done, click the **Save **button to complete the tagging, and you’ll see a Tagged successfully message.

Now, if you export the design, that element will use the Google Map widget with all your specified information.

> *Note: Make sure you have *[*added an active Google Maps API key in Elementor*](https://elementor.com/help/google-maps-integration/)* for the Google Maps widget to work.*

## Resource

- [Figma Example](https://www.figma.com/design/fqYegwSczwfSUbN7RMPYk5/Tagging-Examples-Staging-v16?node-id=894-287&t=4zLA5i3NGEw152SG-1)

## Frequently Asked Questions

**Q: What should I do if the Google Maps widget isn't displaying correctly after tagging?**
A: If the Google Maps widget isn't displaying correctly, first ensure that you've added an active Google Maps API key in Elementor, as this is necessary for the widget to function. Additionally, double-check that you've correctly tagged the frame or image as the Google Maps widget in the UiChemy panel. If issues persist, verify that your design in Figma is properly set up before exporting.

**Q: What is the best practice for tagging the Google Maps widget in Figma?**
A: The best practice for tagging the Google Maps widget in Figma is to use the Step by Step Method for clarity. Start by selecting the top-level page or frame, then choose the Manual Widget Tagging Option. This allows you to specify the exact frame or container for the widget and ensures all widget-specific options are filled accurately, which is crucial for a successful export to Elementor.

**Q: What happens if I leave the Location field blank when tagging the Google Maps widget?**
A: If you leave the Location field blank when tagging the Google Maps widget, Google Maps will use the default location instead. This can be useful if you want to display a general area without specifying a particular address. However, for more precise location targeting, it's recommended to fill in the address field.

**Q: Are there any limitations when using the Google Maps widget with UiChemy?**
A: One limitation when using the Google Maps widget with UiChemy is that it requires an active Google Maps API key in Elementor to function properly. Additionally, UiChemy only supports tagging Google Maps widgets from Figma designs; it does not convert designs from other tools or work with page builders like Divi or WPBakery.