Back to contents

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 the Advanced Map widget for Elementor, which completes a big JetElements widgets set.

The Advanced Map widget available in JetElements plugin 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.

Google Map

Adding Google map to the pages using JetElements Advanced Map widget

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

Advanced Map widget for Elementor

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.

Advanced Map widget content

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

Advanced Map widget 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.

Advanced Map for Elementor

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

Adding API Key to Advanced Map widget

Google Maps option 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 > JetElements Settings > Integrations tab in the WP Dashboard. Here there is the Google MAp API Key field where you need to paste the correct API key to use for the map widget.

JetElements Integrations

In order to create your own API key, click the link in the Create own API key, more info here line below.

Now it’s perfect time to use practical knowledge of adding maps to the pages with JetElements Advanced Map widget!