Advanced Google Maps Shortcode

Last Updated on

The Advanced Google Maps shortcode is a tool that you can add to show a number of locations on a map. You can show one or multiple locations in unlimited count on the same map. Also the Advanced Google Maps shortcode has a few other options that allow you to change the style or add map control buttons in order to provide your users with more control over the map.

In this article, we will explain how to add a Google Maps API key, obtain the latitude and longitude of a location, display the Advanced Google Maps shortcode, and configure the style and map control options.

To see the Advanced Google Maps in action, check out the demo page.

Advanced Google Maps shortcode - demo

In this article


Getting an API Key

Before being able to use Advanced Google Maps Shortcode, You need to get an API key from Google website and enter it into the related field in theme options.

To get an API key:

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

Advanced Google Maps shortcode - getting api

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

Advanced Google Maps shortcode - creating api

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

Advanced Google Maps shortcode - api created

x
Beware! The above API Key created only for the purpose of the article and it has been deleted after the article.
4
From WordPress left menu, Go to Theme Options > Global Settings > API Integrations, find the Google Maps API Key section and paste the API key to the field.

5
Click on Save Settings button.
x
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 detail about updating theme, read Updating the theme article.

Finding Latitude and Longitude

You need to know the exact location of your address to add a location to your map. Latitude and longitude are the coordinates of your exact address or point on the map.

To find latitude and longitude:

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

Advanced Google Maps shortcode - map place

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

Advanced Google Maps shortcode - latitude and longitude

x
Note: This site will also help you to find the longitude and latitude easily.

Displaying Advanced Google Maps

To display Advanced Google Maps shortcode:

1
Add or edit an existing page.
2
In Visual Composer section, Click + button.

Advanced Google Maps shortcode - visual composer section

3
In Add Element pop-up screen, search for Advanced Google Maps and click on it to be added to the page.

Advanced Google Maps shortcode - add element

4
When the shortcode is added, a new pop-up screen called Advanced Google Maps Settings opens. Enter the latitude and longitude from the step above.

Advanced Google Maps shortcode - Advanced Google Maps settings

5
Click on Save Changes button, then Publish or Update the page to check the result.

 

x
Note: You can add unlimited markers to Advanced Google Maps since v5.1 of Jupiter. If you see that you can only add up to 3 markers, please update your theme to the latest version.

Available Advanced Google Maps Settings

There are some settings in Advanced Google Maps pop-up screen regarding the map details.

SettingDescription
Custom Markers Enables the custom marker.
Address : Latitude Sets the address’ latitude value.
Address : Longitude Sets the address’ longitude value.
Address : Full Address Text (Shown In Tooltip) Sets the full address.
Upload Marker Icon For Address Sets the custom marker icon. This option is only visible when Custom Marker option is enabled.
Upload Default Marker Icon Sets the default marker icon.
Need More Address? Displays more fields for new addresses.
Content Box Background Color Sets the content box background color.
Content Box Font Color Sets the content box font color.
Map Height Sets the map height.
Map Height Sets the custom map height. The value must be in pixel.
Zoom Sets the map zoom level.
Pan Control Adds a little dummy icon which helps you go directly to street view by dragging and dropping it to the desired place inside the map.
Draggable Sets the map as draggable.
Zoom Control Adds a small control panel that has two buttons (-) and (+) that lets you zoom in or zoom out your map.
Map Type Adds an option to allow user to select the map type such as roadmap, hybrid, satellite, terrain.
Map Type Control Adds an option to allow user to select different map types like “Satellite” or “Terrain” directly in the front end of the map.
Scale Control Adds an option to allow user to select map zoom level.
Custom Map Styles Sets the custom map style. The styles are in JSON format. For more information about the custom map styles please click here.
Modify Google Maps Hue, Saturation, Lightness Sets the map Hue, Saturation and Lightness.
Extra Class Name Adds a classname to the shortcode for Custom CSS.

Configuring the Style

Google Advanced Maps shortcode contains lots of styling options regarding changing markers, font and background colors, height and map styles.

To configure map style:

1
From WordPress left menu, Go to Pages and click Edit the page that includes Advanced Google Maps.
2
Hover on the Advanced Google Maps shortcode and click Edit button.

Advanced Google Maps shortcode - edit settings

3
A new pop-up screen called Advanced Google Maps Settings opens.

 

4
There are some options regarding configuring Advanced Google Maps shortcode in this page. Configure your shortcode settings according to your needs.
SettingDescription
Custom Markers Enables the custom marker.
Upload Marker Icon For Address Sets the custom marker icon. This option is only visible when Custom Marker option is enabled.
Upload Default Marker Icon Sets the default marker icon.
Content Box Background Color Sets the content box background color.
Content Box Font Color Sets the content box font color.
Map Height Sets the map height.
Map Height Sets the custom map height. The value must be in pixel.
Zoom Sets the map zoom level.
Map Type Adds an option to allow user to select the map type such as roadmap, hybrid, satellite, terrain.
Custom Map Styles Sets the custom map style. The styles are in JSON format. For more information about the custom map styles please click here.
Modify Google Maps Hue, Saturation, Lightness Sets the map Hue, Saturation and Lightness.
Extra Class Name Adds a classname to the shortcode for Custom CSS.
5
Click on Save Changes button, then Publish or Update the page to check the result.
x
Note: If you need to go beyond the default settings to customize the look and feel of the item’s design, you may add a custom CSS class in Extra Class Name setting to be able to add specific styling through CSS to this shortcode. To find out more information, read Adding custom CSS class to a shortcode article.

Configuring the Map Control Options

Advanced Google Maps shortcode provides you some options to allow your users control the map functions such as zooming, changing the scale and map type.

To configure map control options:

1
From WordPress left menu, Go to Pages and click Edit the page that includes Advanced Google Maps.
2
Hover over the Advanced Google Maps shortcode and click Edit button.

Advanced Google Maps shortcode - edit settings

3
A new pop-up screen called Advanced Google Maps Settings opens.

4
There are some options regarding configuring Advanced Google Maps shortcode in this page. Configure your shortcode settings according to your needs.
SettingDescription
Pan Control Adds a little dummy icon which helps you go directly to street view by dragging and dropping it to the desired place inside the map.
Draggable Sets the map as draggable.
Zoom Control Adds a small control panel that has two buttons (-) and (+) that lets you zoom in or zoom out your map.
Map Type Control Adds an option to allow user to select different map types like “Satellite” or “Terrain” directly in the front end of the map.
Scale Control Adds an option to allow user to select map zoom level.
5
Click on Save Changes button, then Publish or Update the page to check the result.

Common Issues

A list of common issues that you may face while configuring Advanced Google Maps. The list will be updated regularly.

Missing API Key

The missing API Key can create an issue due to which the map won’t be visible.
Please make sure you created and addd an API key properly explained at the top of this page.

Wrong coordinates

Please ensure the coordinates you add to the map are correct. Even forgetting 1 digit from the coordinates while copying can create an issue with the map and the map will be shown partially or an entirely different region will be shown on the map.

Custom marker with large dimensions.

Adding a large custom marker won’t allow the map to show fully. It will show the map partially and it can also show a different region on the map. It can also create issues with the width of the map.

Error “Oops! Something went wrong. This page didn’t load Google Maps correctly”

If you see this error in the place of your map, it may be related to API key, but first you need find out exactly why the “This page didn’t load Google Maps correctly” error is showing. There are multiple things that can cause it but fortunately Google gives us a way to learn the specific reason. You need open Webmaster Tools in your browser and check the Console tab. In this thread you can find the instructions how to check Console tab in different browsers.

Here are the most common errors you can see in the Console:

  • MissingKeyMapError
  • RefererNotAllowedMapError
  • ApiNotActivatedMapError
  • InvalidKeyMapError
  • OverQuotaMapError

Let’s find what they mean and how to fix them.

MissingKeyMapError means you don’t have an API key and will need to sign up for one then configure your website to use it.

Follow this instruction in order to generate your key. Then go to Theme Options > Global Settings > API Integrations and add your key in Google Maps API Key field.

 

RefererNotAllowedMapError is the most common error and it will also say “Your site URL to be authorized”. Here’s how to fix the error.

  • Go to https://console.developers.google.com/apis/credentials
  • Click your API key’s name to edit its settings.
  • Under Application restrictions, choose “HTTP referrers (web sites)”, then add two entries below (replacing yourname.com with your own domain). Type the first entry, then hit enter on your keyboard to add it. Repeat to add the second entry. Having both entries (with asterisks) will help ensure your maps work on any URL of your website.

yourname.com/*
*.yourname.com/*

  • Click the Save button and wait for a few minutes for the change to take effect (Google says it can take up to 5 minutes).

 

ApiNotActivatedMapError error means that the API you’re using is not enabled in your account. Here is how to fix it:

  • Go to https://console.developers.google.com/apis/library
  • Under “Maps”, click “View All” to see all API’s.
  • Click the API you’re using.
  • Click the Enable button at the top and wait for a few minutes for the changes to take effect (Google says changes can take up to 5 minutes).

 

InvalidKeyMapError means the key you added in Theme Options is wrong. You created it but did not enter it correctly.

 

OverQuotaMapError means the number of requests has exceeded the usage limits for the Maps JavaScript API. Your app’s requests will work again at the next daily quota reset.

For more details, see the guide to usage limits. The page also explains how you can get higher usage limits.

 

If you have some other error despite these common ones, you can see the Google Maps API Error Messages documentation to find how to fix them.

 

 

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket