How to add Google map with pinned locations using JetElements Advanced Map widget

This tutorial describes the step-by-step process of creating a Google map using Advanced Map widget for Elementor, which completes a big JetElements widgets set.

Advanced Map widget is irreplaceable if you need to insert Google map on your web site’s page. You can add multiple pins, alter map style, switch from satellite to map view and define the zoom settings. The widget is easily customizable and user-friendly.

Adding Google map to the pages using JetElements Advanced Map widget

Step 1 — First of all, in the left-side panel, find Advanced Map widget and drag it to a new section.

Step 2 — Then, proceed to editing. There is the Content block with three option sets, that allows changing content and style of the map and pins.

The Map Settings block provides an ability to specify zoom settings, define the map view and also the location of the map center.

Step 4 — After that, select the style of the map’s appearance from suggested variations in the dropdown list in Map Style.

The extra option is to add the map styles from your theme. Just add a file with the needed styles array in .json format into jet-elements/google-map-styles folder.

Note, that the added file must be minified. Moreover, here you can define the value of the map’s height.

Step 5 — Furthermore, there is a bundle of settings in Pins block, which allows to add the needed amount of locations and mark addresses, describe them, and even label them using pin icon.

Step 6 — Finally, click Update button and in order to apply all the settings to your webpage.

Adding API Key to Advanced Map widget

Google Maps requires a special project key. Without this key, you cannot display Google Maps on your website. It is also called an API key (application programming interface key) and it provides over access to Google maps.

You can add an API key for the Advanced Map widget by navigating to Elementor > Jet Elements Settings tab on the left of the Dashboard. Here there is the API Key field where you need to paste the correct API key to use for the map widget.

In order to create your own API key, click the link in the Create own API key here section.

Now it’s perfect time to use practical knowledge of adding maps to the pages!