Google Maps Widget

Last Updated on

The Google Maps widget allows you to display a realtime map in a widget area/sidebar. It displays almost all the same map controlling options as the Google Maps website.

In this article, we’ll explain how to get an API key and find the latitude and longitude from the Google website, and then display a map through the Google Maps widget in the Jupiter WordPress theme.

Note: Jupiter also includes an Advanced Google Map shortcode which allows you to display a map on your pages via Visual Composer.

In this article

Getting an API Key

First you’ll need to get an API key from the Google website. This is required if you want to display a map.

To get an API key:

Go to the Google API Console page. You’ll need to have a Gmail account.
Create or select a project and click on Continue.

Google maps widget - project

Set the API key name and restrictions, and click on Create.

Google maps widget - API manager

A new pop-up window will appear with your API key.

Google maps widget - API key

Beware! The API Key shown above was created only for the purpose of this article and has since been deleted.

Adding the API Key into the Jupiter Theme

After getting an API key, you’ll need to add it into the Jupiter Theme Options.

To add the API key:

From the WordPress left menu, go to Theme Options > Global Settings > API Integrations.

Add the API key in the Google Maps API Key input field.

Click on the Save Settings button.
Note: This option is available after v5.1.8 of Jupiter. If you do not see this option, update your theme to the latest version. If you want to know more details about updating the theme, read the Updating the theme article.

Finding Latitude and Longitude

In order to display a specific location on your Google map, you’ll need to find its latitude and longitude.

To find the latitude and longitude:

Go to the Google Map website and find your location on the map.
Right-click on the location on the map and select “What’s here?”

Google maps widget - what's here

At the bottom, you will see a card with the latitude and longitude. Take a note of them.

Google maps widget - latitude and longitude

Displaying a Map

In order to display a map in a widget area/sidebar, you’ll need to add the JP – Google Maps widget to a widget area/sidebar and then configure its settings.

To add the widget:

From the WordPress left menu, go to the Appearance > Widgets page.

Google maps widget - widget menu

On the Widgets page, locate the JP – Google Maps widget in the Available Widgets column, and then drag and drop it into a widget area. In this example, we chose the Page Widget Area.

Google maps widget - widget area

Fill out the settings form with the necessary information, and then click on the Save button. More settings are explained in the next sections.
Setting Description
TitleDisplays a title at the top of the widget. If left empty, it will show nothing at the top of the map.
LatitudeDefines the latitude of the location. Set the number you found in the previous section.
LongitudeDefines the longitude of the location. Set the number you found in the previous section.
Note: The widget is ready. Now you may need to add the Page widget area/sidebar to a page so you can see the widget. If you are not familiar with adding a widget area/sidebar to a page, read the Adding a sidebar article.

Configuring the Map Controls

There are several other settings which allow you to configure the map controls.

Setting Description
ZoomDefines the initial map zoom level. The number should be between 1 and 19. The default is 14.
HeightDefines the height of the map. The width is 100% of the widget container.
Enable Scroll WheelEnables or disables scrollwheel zooming on the map.
Enable Pan ControlEnables or disables the state of the Pan controls. This allows you to control the position on the map.
Enable Zoom ControlEnables or disables the state of the Zoom controls.
Enable Map Type ControlEnables or disables the different map types controls.
Enable Scale ControlEnables or disables the zoom in/out controls.
Enable DraggableEnables or disables draggability feature which allows the map to be dragged in different directions by the mouse.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket