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.
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:
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:
Displaying Advanced Google Maps
To display Advanced Google Maps shortcode:
Available Advanced Google Maps Settings
There are some settings in Advanced Google Maps pop-up screen regarding the map details.
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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. |
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:
| Setting | Description |
|---|---|
| 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. |
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.
- Go to https://console.developers.google.com/apis/credentials
- Copy your key.
- Go to Theme Options > Global Settings > API Integrations and paste the key into Google Maps API Key field. Make sure no spaces are added.
- Then check the page with the map.
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.
