There are a bunch of plugins you can use to add Google Maps to your WordPress site. JetElements is one of which. JetElements is a premium Elementor add-on developed by Crocoblock. It adds several extra widgets to your Elementor, including Advanced Map which you can use to easily add Google Maps to your WordPress site. There are 10 map styles you can select. You can also add multiple pins.
In this post, we will show you how to use the Advanced Map widget to add Google Maps to your WordPress site.
Before getting started, make sure you have installed both Elementor and JetEements on your WordPress. You can use the free version of Elementor to use JetElements. While for JetElements, you can get it from its official website for $19. You can also get JetElements via Monstroid2 theme.
Step one: Get the Google Maps API key
Before being able to add Google Maps to your website using JetElements, you need to get an API key to integrate JetElements with Google Maps. You can get the API via Google API Console. So, visit Google API Console and login with your Google account. Once logged in, create a new project by clicking the dropdown menu on the top side and click NEW PROJECT.
Give your project a name and click the CREATE button.
Select your new project from the dropdown menu and click Library on the left panel.
JetElements provides no detailed information on which APIs you need to enable in order to make Advanced Map widget works. According to our experience, you need to at least enable the following APIs:
- Geocoding API
- Maps JavaScript API
Google itself divides the API of Google Maps into 15 types. You can view them by clicking VIEW ALL on the Maps section.
To enable an API, select the API you want to enable (by clicking it) and click the ENABLE button.
Once you are done enabling the required APIs, return to the main dashboard of Google API Console and click Credentials on the left panel. Click the Create credentials button and select API key. Copy the API key on the appearing popup.
Next, login to your WordPress dashboard and go to JetPlugins -> JetElements Settings. Open the Integrations tab and paste the API key you have just copied to the Google Map API Key field.
Start adding the map
Once JetElements and Google Maps are integrated, you can start adding the map. To do so, open the page you want to add the map to with Elementor. On the Elementor editor, drag the Advanced Map widget to the canvas area.
You can go to the left panel to make some settings on your map. You can make the settings from the Map Settings option. To change the style map, you can open the Map Style section.
Adding your business location to the map
By default, the pin address is set to London Eye, London, United Kingdom. You can change it to add the location of your business. To do so, open the Pins option and click the existing pin address. Paste the address of your business to the Pin Address field and change the description on the Pin Description field.
In order to make the pin address you have just set be visible on the map, you need to set the map center. For instance, if your business location in Jakarta, you can set the map center to Jakarta. To set the map center, open the Maps Settings option once again type your preferred map center (ideally city name).
Note: If you see a “For Development Purposes Only” message when adding a map, make sure to enable your Google Cloud billing. The new Google policy requires developers to enable the billing account (you can still you Google Maps API for free). Read this article to learn more.