Jet Elements has a widget called Advanced Map. Unlike Elementor’s native Google Maps widget which only supports a single place, the Advanced Map widget of Jet Elements allows you to create a map with multiple pins. To use this widget, you need to integrate Jet Elements with Google Maps first using an API key.
The Advanced Map widget of Jet Elements is pretty useful if you have a business with several branches in the city and you want to create a map that shows the locations of the branches. This widget is also useful to create something like a map of tourist attractions in a city. Here is how to use this widget.
Step 1: Integrating Jet Elements with Google Maps
As mentioned, you need a Google Maps API key to integrate Jet Elements with Google Maps. You can get an API via Google API Console. So, visit Google API Console and login with your Google account. If you have no project yet, create a new one by clicking the dropdown menu on the top side and click NEW PROJECT on the appearing window.
Give your project a name and click the CREATE button.
Once your new project is created, select it via the dropdown menu on the top side of the Google API Console dashboard then click Library on the left panel.
Google divides the API of Google Maps into 15 types. You need to enable the APIs required by the Jet Element’s Advanced Map widget in order to use the widget. Crocoblock, the developer of Jet Elements, provides no detailed information about the required APIs. Based on our experience, we enabled the following APIs:
- Directions API
- Geocoding API
- Maps JavaScript API
- Places API
You can click the VIEW ALL link on the Maps section to show all Google Maps APIs. To enable an API, select the concerned API (by clicking it) and click the ENABLE button.
After enabling the required APIs, click Credentials on the left panel then click the Create credentials button and select API key. Copy the API key on the appearing window.
Next, login to your WordPress dashboard and go to JetPlugins -> JetElements Settings.
Click the Integrations tab and paste your API key to the Google Map API Key field on the Google Maps section.
Step 2: Start creating the map
Once Jet Elements and Google Maps are successfully integrated, you can start creating the map. To do so, create a new page (Pages -> Add New) or post (Posts -> Add New) and edit it with Elementor. On the Elementor editor, set the page layout first before you start to work. To do so, open the Settings panel by clicking the gear icon on the bottom-left corner. Select a page layout from the Page Layout dropdown menu under the General Settings option.
Add a new section by clicking the plus icon on the canvas area and drag the Advanced Map widget to the canvas.
Set the map center to your city (or any region according to the map you want to create). Also set the initial zoom.
Open Google Maps and search for the first location you want to add to the map and copy its address.
Return to your Elementor tab and open the Pins option. Click the existing location and replace the address with the address you have just copied. Also add the description of the location on the Pin Description field.
Click the ADD ITEM button to another address.
To change the style of your map, as well as the high, you can open the Map Style option.
NOTE: If the map is not loaded after you drag the Advanced Map widget to the canvas area and you see a “For Development Purposes Only” message, 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 fix the issue.
