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.

Table of Contents

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.

  1. First, select the Step by Step Method and click on the Start button.
  2. Select the top-level page or frame of your layout, then click on the Next button.
  3. Under the Widget Tagging Mode tab, select the Manual Widget Tagging Option.
  4. 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.
  5. 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.

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

  1. In the Location field, you have to add the address, or you can leave it blank for Google Maps to use the default location.
  2. From the Zoom field, you have to select the Zoom level.
  3. 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 for the Google Maps widget to work.

Resource

About the Author

Photo of Sagar Patel CEO of UiChemy
CEO · UiChemy · 11 years experience

Sagar is the Founder & CEO of POSIMYTH Innovations, with 10+ years building WordPress products trusted by 100,000+ websites globally. He has led the development of The Plus Addons for Elementor, Nexter, WDesignKit, and UiChemy, all built hands-on from concept to launch. His work focuses on making website building faster, more flexible, and accessible for creators and businesses worldwide.

WordPressFigmaUI DesignWeb DesignElementorBricksAutomationClaudeAI

Related Frequently Asked Questions


What should I do if the Google Maps widget isn't displaying correctly after tagging?

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.

What is the best practice for tagging the Google Maps widget in Figma?

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.

What happens if I leave the Location field blank when tagging the Google Maps widget?

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.

Are there any limitations when using the Google Maps widget with UiChemy?

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.

Last reviewed: April 14, 2026