We all know how important it is for any business to connect with its customers. Every Website has a section in its Contact Us page where it uses a Google Map to display its locations and information.
Displaying a google map is a very important aspect of any business website. It helps the customers find your location, connect with your business, and also helps in building your organization’s credibility.
Many businesses have their offices at multiple locations worldwide; you can mark these multiple locations inside a single map using the Elementor Addon Elements Google Map widget.
This tutorial will see how to add a Google Map in Elementor with different location markers and apply different styles and themes to it.
To add an EAE Google Map, you will have to install both the Elementor Addon Elements and the Elementor Page Builder plugins.
Insert Google Map API key
Head over to your WordPress admin dashboard, and navigate to the Elementor Addons Elements; then, under the setting page, click on the Configuration tab and insert the API key and save the changes.
Add Google Map In Elementor
Open the page in Elementor editor and search for the EAE- Google Map, and then drag and drop the EAE – 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 coordinates of the location where you want to place the marker. You can use www.latlong.net to get 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 will get an option to choose whether you want to show Info Window on page load or not. 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 to your Google Map. To add Snazzy Map style, paste the JSON code.
How To Generate Snazzy Map Style
Snazzy Map provides lots of different styles for your Google Map. If you want to add a Goole Map on your Website with a different style and appearance, you can get it from:
- Go To Snazzy Map
- Copy the JSON code for the skin whose style you want to implement on your Map.
- Now put this javascript style array(JSON code) in the “Snazzy Maps” field in the widget’s setting.
That’s it. Now you have styled google map that is completely blended with the theme of your Website.
Checkout the Google Map demo setup.