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.
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 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
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.
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:
| Setting | Description |
|---|---|
| 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:
| Setting | Description |
|---|---|
| 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. |
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. |
If you have any questions regarding the Google Maps Shortcode, feel free to contact Artbees support team.
