Embed Google Map on WordPress Using Elementor plugin

Embed Google map on your webpage is very useful for online stores and shops. One way it helps people reach you, another way, you can mark your shop globally. Today, we will talk about how you can embed Google Maps on WordPress using Elementor page builder.

In the first place, Elementor has Google Map widget that you can use for this matter. However, it has limited style options. Hence today, we will be using Advanced Google Map widget by Element Pack.

No need for further introductions. Let’s start!

Complete Guide to Embed Google Map on WordPress

Whenever you want to use google map on WordPress, you need to insert an API key on your dashboard. Using this key, you need to authenticate as a user to Google. Let’s see in pictures.

First, insert the Advanced Google Map widget onto your website.

As soon as you drag and drop the widget, it will show a popup message. In order to make the map work properly, the system will ask API key from you. Let’s see how to do that.

API settings for Embed Google Map on WordPress

Go to WordPress Dashboard> Element Pack> API Settings.

Here, you can see a field named Google Map API Key. Now you need to put your API key in the box and save. However, you can get the key for your embed google map on WordPress from here.

Blog for you

Learn more about WordPress

Click me

Customizing The Content Tab of the Google Map

Now, let’s change the outlook of the map according to your taste. In this part, we will talk about the settings of the widget.

Widget Settings of Embed Google Map on WordPress

Like the image above, the first thing you will see is the Google Map section. This is under the Content tab. It holds the basic settings of the map. The switchers on the screen mainly show/hide corresponding buttons/functions on the map.

Therefore, you can show/hide the zoom button, search box, map type option, and street view control from here. Moreover, there are also map zoom, map height, and search box spacing options here. Furthermore, you can view the map in Satellite mode or Street mode.

The next section is Marker. By all means, you can place an infinite number of markers using the Advanced Google Map widget. Each marker has fields like Latitude, Longitude, Title, and Content. However, using the first two, you need to specify the position of the marker.

Another key point is, you can add custom icons as markers. However, you can not find this feature with any other mapping widgets. This function is exclusive to Element Pack users.

Popular blog

How to Use Iframe Widget in Elementor by Element Pack

Read now

Unique Styles of the Embed Google Map on WordPress

To this point, all we did was setting up the layout. Now, we will change the outlook of the embed google map on WordPress using Elmentor.

Customizing The Style Tab of the Google Map

Once again, the style tab has two sections. With the GMap Style section, you can insert any skin to your map. These skins change the details of the whole map. Hence, you only need to paste the JSON code in the marked field. Also, you may use the CSS Filters for more style.

In addition, you can import the JSON codes from Snazzymaps. They have many free and premium map skins available at a cheap rate.

Finally, the search box at the top of the map is also editable. It is very easy to change its outlook. Then again, change the color, border type, border radius, and add box shadow to the search box. Make sure that the finished product catches the eyes of the visitors.

Conclusion

Well done! You have successfully learned the whole process. With this blog, I hope you can make embed google map on WordPress using Elementor easily. For any further information, please visit our knowledge base. Without further ado, stay safe. Thanks for reading this blog!

Blog

Complete Guide to Embed Google Map on WordPress

Learn more about WordPress

Customizing The Content Tab of the Google Map

How to Use Iframe Widget in Elementor by Element Pack

Unique Styles of the Embed Google Map on WordPress

Conclusion

Read more WordPress blogs

How to Build WordPress Website: A Step-by-Step Guide for Beginners

Generate Professional Sitemaps & Wireframes in Minutes

How to Use Elementor to Build a Website? (8 Easy Steps)

Best Christmas and Year-end Deals for WordPress

How to show advanced tooltips using Elementor

How to make custom header using Elementor and Element Pack

Download Today & Start Your Dream Designs!