Google Maps Shortcode

Updated on January 22, 2019

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


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:

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

Advanced Google Maps shortcode - getting api

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

Advanced Google Maps shortcode - creating api

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

Advanced Google Maps shortcode - api created

4From 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.
5Click 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:

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

Advanced Google Maps shortcode - map place

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

1When 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:

1From WordPress left menu, Go to Pages and click Edit the page that includes Google Maps.
2Hover on the Advanced Google Maps shortcode and click Edit button.
3A new pop-up screen called Google Maps Settings opens.
4There 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.
5Click on Save Changes button, then Publish or Update the page to check the result.

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:

1From WordPress left menu, Go to Pages and click Edit the page that includes Advanced Google Maps.
2Hover over the Advanced Google Maps shortcode and click Edit button.
3A new pop-up screen called Advanced Google Maps Settings opens.
4There 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.
5Click 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.

Did this answer your question?