Google Maps Shortcode

Last Updated on

The Google Maps shortcode is one of the shortcodes which you can take advantage of in The Ken theme. To see a live demo of this feature, please click here.

Ken Google Maps Demo 1

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 Settings > Third Party API, find the Google Maps API Key section and paste the API key to the field.
5
Click on Save Settings button.

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


Displaying Google Maps Shortcode

To add the Google Maps shortcode in a page or post to appear on the website, please follow the steps below:

Add Google Maps Shortcode

Ken Google Maps Add Visual Composer

After adding a page, use the Visual Composer tool to add Google Maps shortcode by clicking on the + (plus) icon and searching for Google Maps. Select the one with red icon, as it will allow you to embed with a location and overlays, as detailed below.

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

Ken Google Maps Options 1

Available Google Maps Settings

After you add the Google Maps shortcode, a pop up window will appear with which you can set options to fine tune your Google Maps. A detailed description of each option for Google Maps shortcode follows:

Ken Google Maps Options 3

SettingDescription
Address 1 Full Address Text (shown in tool-tip) Sets the full address.
Upload Marker Icon If you want to have a customized icon for your map marker, you can upload your icon using this option. If left blank, the Google Maps default marker icon will be used.
Map Height Use this option to set the map height. The value for this option is in pixels.
Full Height? This option will make the map resize itself to take up the whole container upon browser window resizing.
Parallax Effect? Enable this option if you want your map to have a Parallax effect.
Zoom You can add the map default zoom level of the. Play with this option to find the best fit for your case.
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 You can Enable or Disable the ability to drag the map to different sections.
Zoom Control Enable this option to show a Zoom Control tool on the map.
Map Type Control  Adds an option to allow user to select the map type such as Satellite or Terrain.
Scale Control You can Enable or Disable the Scale Control, which allows the viewer to set different zoom levels.
Modify Google Maps Hue, Saturation, Lightness Sets the map Hue, Saturation and Lightness.

Configuring the Style

Google 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 Google Maps.
2
Hover on the Advanced Google Maps shortcode and click Edit button.
3
A new pop-up screen called Google Maps Settings opens.
4
There are some options regarding configuring Google Maps shortcode in this page. Configure your shortcode settings according to your needs.
SettingDescription
Upload Marker Icon Sets the custom marker icon.
Map Height Sets the map height.
Full Height? To make the map resize itself to take up the whole container upon browser window resizing.
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.
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.

If you have any questions regarding the Google Maps Shortcode, feel free to contact Artbees support team.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket