Need to figure out how to add Google Maps to WordPress with JetElements?
There are a bunch of plugins you can use to add Google Maps to your website WordPress. JetElements is one. JetElements is an add-on Elementor premium developed by Crocoblock. It adds several additional widgets to your Elementor, including Advanced Map that you can use to easily add Google Maps to your WordPress site.
You can select 10 map styles. You can also add multiple pins.
In this article, we will show you how to use the widget Advanced Map to add Google Maps to your website WordPress.
Before you start, make sure you have installed Elementor and JetEements on your WordPress. You can use the free version ofElementor to use JetElements. While for JetElements, you have to acquire it on its official website for $19.
Step 1: Get Google Maps API Key
Before you can add Google Maps to your Website using JetElements, you need to obtain an API key to integrate JetElements with Google Maps. You can get the API through the Google API console. So, visit Google API Console and sign in with your Google account.
Once logged in, create a new project by clicking on the drop-down menu at the top and click on NEW PROJECT.
Give a name to your project and click on the button CREATE.
Select your new project from the drop-down menu and click Library on the left panel.
JetElements does not provide any detailed information about the APIs you need to enable to make the widget work. Advanced Map. According to our experience, you should at least enable the following APIs:
- Geocoding API
- Maps JavaScript API
Google itself divides the Google Maps API into 17 types. You can see them by clicking SHOW ALL in the section Cards.
To activate an API, select the API you want to activate (by clicking on it) and click on the button ACTIVATE.
Once you have completed enabling the required APIs, return to the main dashboard of the Google API Console and click Identifiers on the left panel. Click on the button Create credentials and select API key. Copy the API key on the popup that appears.
Next, login to your WordPress dashboard and go to the menu JetPlugins – > JetElements Settings.
Open the tab integrations and paste the API key you just copied into the field Google Map API Key.
Start adding the card
Once JetElements and Google Maps are integrated, you can start adding the map. To do this, open the page where you want to add the map in Elementor. On the Elementor editor, drag the Advanced Map widget into the editing area.
You can go to the left panel to manipulate some settings on your map. You can make the settings from the section Map Settings.
To change the map style, you can open the section MapStyle.
Add your location to the map
By default, the pin address is set to London Eye, London, United Kingdom. You can edit it to add your business location.
To do this, open the section Pins and click on the existing pin address. Paste your business address in the field Pin Address and modify the description in the field Pin Description.
To make the pin address you just set visible on the map, you need to set the center of the map. For example, if your business location is in Paris, you would set the center of the map to Paris.
To define the center of the map, open the section Map Settings again type your preferred map center (city name).
Note: If you see a 'For development purposes only' message when adding a card, be sure to enable your Google Cloud billing. The new Google policy requires developers to activate the billing account (you can still use the Google Maps API for free).
Get Elementor Pro Now!!!
Conclusion
So ! That's it for this article that shows you how to add Google Maps to WordPress with JetElements. If you have any concerns about how to get there, let them know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
