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.
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.
Learn more about WordPress
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.
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.
How to Use Iframe Widget in Elementor by Element Pack
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.
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!
