1. Home
  2. Google Maps Widget

Google Maps Widget

Updated on October 17, 2017

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.

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:

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

Google maps widget - project

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

Google maps widget - API manager

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

Google maps widget - API key

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:

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

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

3Click on the Save Settings button.

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:

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

Google maps widget - what's here

3At 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:

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

Google maps widget - widget menu

2On 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

3Fill 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
Title Displays a title at the top of the widget. If left empty, it will show nothing at the top of the map.
Latitude Defines the latitude of the location. Set the number you found in the previous section.
Longitude Defines the longitude of the location. Set the number you found in the previous section.

Configuring the Map Controls

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

Setting Description
Zoom Defines the initial map zoom level. The number should be between 1 and 19. The default is 14.
Height Defines the height of the map. The width is 100% of the widget container.
Enable Scroll Wheel Enables or disables scrollwheel zooming on the map.
Enable Pan Control Enables or disables the state of the Pan controls. This allows you to control the position on the map.
Enable Zoom Control Enables or disables the state of the Zoom controls.
Enable Map Type Control Enables or disables the different map types controls.
Enable Scale Control Enables or disables the zoom in/out controls.
Enable Draggable Enables or disables draggability feature which allows the map to be dragged in different directions by the mouse.
Did this answer your question?