Adding a Google Map to your website helps customers find your business easily, enhances trust, and improves your site’s professional appearance. But what if you want to display multiple office locations on a single styled map?
With the Elementor Addon Elements – Google Map widget, you can do just that — and even customize the look of your map using Snazzy Maps styles. Whether you’re a local shop or a global brand, this guide will walk you through integrating Google Maps in Elementor, adding multiple location markers, and applying beautiful map themes.
Key Takeaways
- How to insert Google Maps into your Elementor site using the EAE widget
- Steps to add multiple custom location markers
- How to apply beautiful custom map styles using Snazzy Maps
- Where to get your Google Maps API key and how to add it
- How to align your map style with your brand design effortlessly
Why Use Google Maps on Your Website?
Integrating Google Maps into your website isn’t just about showing your location—it’s about building trust and improving user experience. Here’s why it matters:
- Builds Credibility: A live map reassures visitors that your business is legitimate and easy to locate.
- Improves Navigation: Customers can get directions to your location with a single click, boosting foot traffic to physical stores or offices.
- Enhances User Experience: Instead of switching tabs to search your location, users can interact with a dynamic map right on your site.
- Showcases Multiple Locations: Great for businesses with branches or offices in different cities or countries.
How to Add Google Map in Elementor
Insert Google Map API key
Please check our detailed article on How to Generate Google Map API Key?
- On your WordPress admin dashboard, Go to the Elementor Addons Elements.
- Under the settings page, click on the Configuration tab, insert the Google Map API key, and save the changes.
Add Google Map In Elementor
Open the page in the Elementor editor, search for the Google Map, and then drag and drop the Google Map widget onto a section.
Configure The Map
Under the General section, you can add address locations and style your Map. You can add multiple location markers by clicking on the Add Item button.
Under the Longitude & Latitude option, you can specify the location coordinates where you want to place the marker. You can use www.latlong.net to get the coordinates of your desired location.
Next, enter the address details and information.
Moreover, you can upload a custom marker icon and adjust its size accordingly.
Further, you can choose whether to show the Info Window on the page load or not. The information Window contains the Address Title and Description.
Next, you can adjust the Map’s height to the zoom percentage and enable the Animate Marker option to insert animated markers into your Google Map. To add the Snazzy Map style, paste the JSON code.
How to Apply Snazzy Maps Style to Your Google Map
Snazzy Map provides lots of different styles for your Google Maps. If you want to add a Google Map on your Website with a different style and appearance, you can get it from.
To do this, follow these steps:
- Go To Snazzy Map
- Click on the particular Map which you want to display and copy the JSON code.
- Put this javascript style array(JSON code) in the “Snazzy Style” field in the widget’s settings.
That’s it. Now you have styled Google Maps that is completely blended with the theme of your Website.
Check out the Google Map Demo Setup.
FAQs on Google Map in Elementor
How to generate a Google Maps API key?
You can follow our detailed tutorial on How to Generate Google Maps API Key. This is required for your map to work properly.
How do I show multiple locations on one map?
Use the “Add Item” feature in the Google Map widget’s settings to insert multiple markers, each with a custom title, description, and coordinates.
Can I use animated markers or custom icons?
Yes, the EAE Google Map widget allows you to upload your own marker icons and even enable animated effects for better interactivity.
What is the best way to add Google Maps to Elementor?
The easiest way is by using the Elementor Addon Elements – Google Map widget, which allows you to add multiple locations, custom markers, and design enhancements.
Make Your Maps Work & Look Better
In conclusion, incorporating Elementor Addon Elements Google Maps widget with Snazzy Map styles is a powerful and visually appealing addition to your website. This not only facilitates easy navigation for your users but also enhances the overall aesthetic, blending seamlessly with your site’s theme.
By following the steps outlined in this guide, you can effortlessly elevate the appearance of your Google Maps, making them more engaging and aligned with your brand.
