Below, you’ll find a detailed guide on how to add the WP Go Maps (formerly WP Google Maps) Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WP Go Maps (formerly WP Google Maps) Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the WP Go Maps (formerly WP Google Maps) Plugin and the shortcodes it provides:
"WP Go Maps is a powerful WordPress plugin that allows users to easily create and manage interactive Google Maps on their website. Formerly known as WP Google Maps, it's user-friendly and highly customizable."
- [wp-google-maps]
- [wp-google-maps_store_locator]
- [wpgmza]
WP Go Maps [wp-google-maps] Shortcode
The wp-google-maps plugin shortcode is designed to generate and display a Google Map on your WordPress site. It utilizes various attributes to customize the map’s appearance. The shortcode fetches the map ID and creates a map instance. It also sets default attributes like width, height, and alignment. It allows developers to modify these default options and attributes. The map’s appearance is further adjusted using CSS classes. The shortcode also handles scripts for Google Maps API, ensuring the map loads correctly. If an error occurs or the map ID doesn’t exist, it returns an error message.
Shortcode: [wp-google-maps]
Parameters
Here is a list of all possible wp-google-maps shortcode parameters and attributes:
id– The unique identifier of the mapwidth– Specifies the width of the mapheight– Specifies the height of the mapwidthType– Defines the units to measure the widthheightType– Defines the units to measure the heightalignment– Aligns the map to the left, center, or rightclassname– Adds a custom class to the map for styling
Examples and Usage
Basic example – Display a map with the default settings using the map’s ID.
[wp-google-maps id=1 /]Advanced examples
Display a map with a custom width and height. The width is set to 500 pixels and the height is set to 300 pixels.
[wp-google-maps id=1 width="500px" height="300px" /]Display a map with a custom class name. This allows you to apply additional CSS styling to the map. The class name is set to ‘my_custom_class’.
[wp-google-maps id=1 classname="my_custom_class" /]Display a map with a specific alignment. The alignment is set to 2, which corresponds to center alignment.
[wp-google-maps id=1 alignment="2" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wp-google-maps] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode(self::SLUG, array($this, "map"));Shortcode PHP function:
function map($attributes){
global $wpgmza;
$html = "";
/* Store the raw attributes, as entered by the user */
$rawAttributes = array_merge(array(), $attributes);
if(isset($rawAttributes['id'])){
unset($rawAttributes['id']);
}
/* Developer Hook (Filter) - Modify default shortcode attributes for primary map shortcode */
$defaults = apply_filters("wpgmza_map_shortcode_get_default_attributes", $this->getDefaults(self::SLUG));
$attributes = shortcode_atts($defaults, $attributes);
$attributes = (object) $attributes;
$id = !empty($attributes->id) && !empty(intval($attributes->id)) ? intval($attributes->id) : 1;
$map = Map::createInstance($id, $rawAttributes);
if($map->element !== null){
$pullMethod = intval($wpgmza->settings->wpgmza_settings_marker_pull);
if(!empty($pullMethod) && $pullMethod === 1){
/* Legacy call, but we will leave it as we won't be making improvemets to XML methods moving forward */
if(function_exists("wpgmza_check_if_marker_file_exists")){
wpgmza_check_if_marker_file_exists($id);
}
}
$options = array(
"width" => !empty($map->map_width) ? intval($map->map_width) : 100,
"height" => !empty($map->map_height) ? intval($map->map_height) : 400,
"widthType" => !empty($map->map_width_type) ? $map->map_width_type : "%",
"heightType" => !empty($map->map_height_type) ? $map->map_height_type : "px",
"alignment" => !empty($map->wpgmza_map_align) ? intval($map->wpgmza_map_align) : 1
);
/* Developer Hook (Filter) - Modify default map options for shortcode */
$options = (object) apply_filters("wpgmza_shortcode_map_options", $options);
$styles = array(
"display" => "block",
"width" => !empty($attributes->width) ? $attributes->width : "{$options->width}{$options->widthType}",
"height" => !empty($attributes->height) ? $attributes->height :"{$options->height}{$options->heightType}",
"overflow" => "hidden",
"position" => "relative"
);
$classes = array(
"wpgmza_map"
);
if(!empty($attributes->classname)){
$classes[] = $attributes->classname;
}
switch($options->alignment){
case 1:
$classes[] = "wpgmza-auto-left";
break;
case 2:
$classes[] = "wpgmza-auto-center";
break;
case 3:
$classes[] = "wpgmza-auto-right";
break;
}
$elemAttributes = array(
"id" => "wpgmza_map_{$id}",
"class" => implode(" ", $classes),
"style" => $this->prepareInlineAttributes($styles, ";", ":", ""),
"data-map-id" => $id,
"data-maps-engine" => $wpgmza->settings->engine,
"data-build-engine" => $wpgmza->internalEngine->getEngine(),
"data-shortcode-attributes" => $this->prepareJsonAttribute("data-shortcode-attributes", $attributes),
"data-settings" => $this->prepareJsonAttribute('data-settings', $map->getDataSettingsObject()),
);
/* Developer Hook (Filter) - Modify default HTML attributes for container */
$elemAttributes = apply_filters("wpgmza_map_shortcode_get_html_attributes", $this->filterMapElementAttributes($elemAttributes, $attributes));
$elemAttributes = $this->prepareInlineAttributes($elemAttributes);
/*
* Prepare components around map element
*
* Provide filter, useful for adding/altering/order components
*/
$components = $this->getMapComponents($map);
/* Developer Hook (Filter) - Modify map components to be output for a specific map */
$components = apply_filters("wpgmza_shortcode_map_components", $components, $map, $attributes);
/* Build inner stacks */
$innerComponents = "";
if(!empty($components->inside)){
foreach($components->inside as $anchor => $nodes){
if(!empty($nodes) && is_array($nodes)){
$innerComponents .= "\n<div class='wpgmza-inner-stack {$anchor}'>" . implode("", $nodes) . "</div>";
}
}
}
/* Developer Hook (Filter) - Modify HTML content before map container */
$before = apply_filters("wpgmza_shortcode_map_container_before", !empty($components->before) ? implode("", $components->before) : "");
/* Developer Hook (Filter) - Modify HTML content for inner components of the map */
$inside = apply_filters("wpgmza_shortcode_map_container_inside", $innerComponents);
/* Developer Hook (Filter) - Modify HTML content after map container */
$after = apply_filters("wpgmza_shortcode_map_container_after", !empty($components->after) ? implode("", $components->after) : "");
$container = "<div {$elemAttributes}>";
/* Developer Hook (Filter) - Legacy filter, allows modification of map div */
$container = apply_filters("wpgooglemaps_filter_map_div_output", $container, $id);
/* Developer Hook (Filter) - Legacy filter, alter opening tag types */
$container = apply_filters("wpgmza_shortcode_map_container_open", $container, $id);
$container .= $inside . "</div>";
/* Wrap standlone components */
$before = $this->standaloneComponent($before, $options->alignment, $styles);
$after = $this->standaloneComponent($after, $options->alignment, $styles);
$html = "{$before}{$container}{$after}";
$coreDependencies = array();
$scriptLoader = new ScriptLoader($wpgmza->isProVersion());
$scripts = $scriptLoader->getPluginScripts();
foreach($scripts as $handle => $script){
$coreDependencies[] = $handle;
}
$apiLoader = new GoogleMapsAPILoader();
if($apiLoader->isIncludeAllowed()){
$coreDependencies[] = 'wpgmza_api_call';
if($wpgmza->settings->engine == 'google-maps'){
// TODO: Why is this not handled by the API loader?
wp_enqueue_script('wpgmza_canvas_layer_options', WPGMZA_PLUGIN_DIR_URL . 'lib/CanvasLayerOptions.js', array('wpgmza_api_call'));
wp_enqueue_script('wpgmza_canvas_layer', WPGMZA_PLUGIN_DIR_URL . 'lib/CanvasLayer.js', array('wpgmza_api_call'));
}
}
// TODO: Come up with a proper solution. Gutenberg dependency breaks developer mode
$gutenbergIndex = array_search('wpgmza-gutenberg', $coreDependencies);
if($gutenbergIndex !== false){
array_splice($coreDependencies, $gutenbergIndex, 1);
}
if($wpgmza->settings->engine == 'open-layers'){
if($index = array_search('wpgmza-google-vertex-context-menu', $coreDependencies)){
array_splice($coreDependencies, $index, 1);
}
}
//Legacy hooks
/* Developer Hook (Action) - Enqueue additional frontend scripts */
do_action("wpgooglemaps_hook_user_js_after_core");
/* Developer Hook (Action) - Enqueue additional frontend scripts */
do_action("wpgooglemaps_basic_hook_user_js_after_core");
/* Developer Hook (Action) - Localize additional frontend script variable */
do_action("wpgooglemaps_hook_user_js_after_localize", $map);
if(empty($wpgmza->settings->disable_autoptimize_compatibility_fix)){
// Autoptimize fix, bypass CSS where our map is present as large amounts of inline JS (our localized data) crashes their plugin. Added at their advice.
add_filter('autoptimize_filter_css_noptimize', '__return_true');
}
} else {
$html = __("Error: The map ID", "wp-google-maps") . " (" . $id . ") " . __("does not exist", "wp-google-maps");
}
// Internal action before output, for extenstion and hook trigger
$this->beforeOutput(self::SLUG);
return $html;
}
Code file location:
wp-google-maps/wp-google-maps/includes/class.shortcodes.phpWP Go Maps [wp-google-maps_store_locator] Shortcode
The wp-google-maps plugin shortcode is a powerful tool for creating a store locator on your website. It uses default shortcode attributes to generate a map based on the specified ID. The shortcode also allows customization of the store locator with attributes such as URL, classname, default radius, and default address. In case of an invalid map ID, it returns an error message.
Shortcode: [wp-google-maps_store_locator]
Parameters
Here is a list of all possible wp-google-maps_store_locator shortcode parameters and attributes:
id– It is the unique identifier of the map.url– It specifies the URL for data-source of the map.classname– It adds a custom CSS class to the map container.default_radius– It sets the default radius for the store locator.default_address– It sets the default address for the store locator.
Examples and Usage
Basic example – Display a store locator map with a specific ID
[wpgmza_store_locator id=1 /]Advanced examples
Display a store locator map with a specific ID and a default radius for the search
[wpgmza_store_locator id=1 default_radius=5 /]Display a store locator map with a specific ID, a default radius for the search, and a default address
[wpgmza_store_locator id=1 default_radius=5 default_address="New York" /]Display a store locator map with a specific ID, a default radius for the search, a default address, and a specific URL for the map
[wpgmza_store_locator id=1 default_radius=5 default_address="New York" url="http://yourwebsite.com/map" /]Display a store locator map with a specific ID, a default radius for the search, a default address, a specific URL for the map, and a custom class name for the map container
[wpgmza_store_locator id=1 default_radius=5 default_address="New York" url="http://yourwebsite.com/map" classname="my-custom-class" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wp-google-maps_store_locator] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode(self::SLUG . "_" . self::STORE_LOCATOR, array($this, "storeLocator"));Shortcode PHP function:
function storeLocator($attributes){
global $wpgmza;
$html = "";
/* Developer Hook (Filter) - Modify default shortcode attributes for store locator shortcode */
$defaults = apply_filters("wpgmza_sl_shortcode_get_default_attributes", $this->getDefaults(self::SLUG . "_" . self::STORE_LOCATOR));
$attributes = shortcode_atts($defaults, $attributes);
$attributes = (object) $attributes;
$id = !empty($attributes->id) && !empty(intval($attributes->id)) ? intval($attributes->id) : 1;
$map = Map::createInstance($id);
if($map->element !== null){
$storeLocator = StoreLocator::createInstance($map);
$container = $storeLocator->document->querySelector('.wpgmza-store-locator');
if(!empty($container)){
if(!empty($attributes->url)){
$container->setAttribute('data-map-id', $id);
$container->setAttribute('data-url', sanitize_url($attributes->url));
/* Probably separated, send over the settings */
$container->setAttribute('data-map-settings', json_encode($map->getDataSettingsObject()));
}
if(!empty($attributes->classname)){
$container->addClass($attributes->classname);
}
if(!empty($attributes->default_radius)){
$radiusSelect = $container->querySelector('select.wpgmza-radius');
if($radiusSelect){
$radiusOptions = $radiusSelect->querySelectorAll('option');
foreach($radiusOptions as $option){
if($option->hasAttribute('selected')){
$option->removeAttribute('selected');
}
if(intval($option->getAttribute('value')) === intval($attributes->default_radius)){
$option->setAttribute('selected', 'selected');
}
}
$radiusSelect->setAttribute('data-default-override', 'true');
}
}
if(!empty($attributes->default_address)){
$addressInput = $container->querySelector('input[data-name="defaultAddress"]');
$addressInput->setValue($attributes->default_address);
}
}
$html = $this->standaloneComponent($storeLocator->html);
} else {
$html = __("Error: The map ID", "wp-google-maps") . " (" . $id . ") " . __("does not exist", "wp-google-maps");
}
$this->beforeOutput(self::SLUG. "_" . self::STORE_LOCATOR);
return $html;
}
Code file location:
wp-google-maps/wp-google-maps/includes/class.shortcodes.phpWP Go Maps [wpgmza] Shortcode
The wp-google-maps shortcode is designed to generate and integrate Google Maps into a WordPress site. It uses various global variables and functions to create a map based on the attributes specified. The shortcode allows users to define the map’s ID, width, and height. If no ID is provided, it defaults to 1. It also checks if the map ID exists and retrieves the API key from the options. The shortcode also handles the map’s alignment, style, and other settings. It also checks if the store locator is enabled and positions it accordingly. The shortcode finally outputs a div with the map, which is then displayed on the WordPress site.
Shortcode: [wpgmza]
Parameters
Here is a list of all possible wpgmza shortcode parameters and attributes:
id– Specifies the unique identifier of the mapwidth– Defines the width of the mapheight– Sets the height of the mapzoom– Determines the zoom level of the mapclassname– Adds a custom class to the map
Examples and Usage
Basic example – Display a map with default settings by referencing the map ID.
[wpgmza id=1 /]Advanced examples
Display a map by referencing the map ID and setting a specific width and height.
[wpgmza id=1 width="500px" height="400px" /]Display a map by referencing the map ID, setting a specific width and height, and applying a custom class for additional styling.
[wpgmza id=1 width="500px" height="400px" classname="my-custom-map" /]Display a map by referencing the map ID and setting a specific zoom level.
[wpgmza id=1 zoom=15 /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpgmza] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wpgmza', 'wpgmaps_tag_basic' );Shortcode PHP function:
function wpgmaps_tag_basic( $atts )
{
global $wpgmza_current_map_id;
global $wpgmza_version;
global $short_code_active;
global $wpgmza_override;
global $wpgmza;
$short_code_active = true;
shortcode_atts( array(
'id' => '1',
'width' => 'inherit',
'height' => 'inherit'
), $atts );
$ret_msg = "";
if(isset($atts['id']))
$wpgmza_current_map_id = (int)$atts['id'];
else
$wpgmza_current_map_id = 1;
$map = WPGMZA\Map::createInstance(isset($atts['id']) ? $atts['id'] : 1);
$res = wpgmza_get_map_data($wpgmza_current_map_id);
if (!isset($res)) { echo __("Error: The map ID","wp-google-maps")." (". intval($wpgmza_current_map_id) .") ".__("does not exist","wp-google-maps"); return; }
$user_api_key = get_option( 'wpgmza_google_maps_api_key' );
if (!function_exists('wpgmaps_admin_styles_pro')) {
$wpgmaps_extra_css = ".wpgmza_map img { max-width:none; } .wpgmza_widget { overflow: auto; }";
wp_add_inline_style( 'wpgmaps-style', stripslashes( $wpgmaps_extra_css ) );
$wpgmza_main_settings = get_option("WPGMZA_OTHER_SETTINGS");
if (isset($wpgmza_main_settings['wpgmza_custom_css']) && $wpgmza_main_settings['wpgmza_custom_css'] != "") {
wp_add_inline_style( 'wpgmaps-style', stripslashes( $wpgmza_main_settings['wpgmza_custom_css'] ) );
}
}
if (isset($atts['zoom'])) {
$zoom_override = (int)$atts['zoom'];
$wpgmza_override['zoom'] = $zoom_override;
}
$map_align = $map->wpgmza_map_align;
$wpgmza_settings = get_option("WPGMZA_OTHER_SETTINGS");
if (isset($wpgmza_settings['wpgmza_settings_marker_pull']) && $wpgmza_settings['wpgmza_settings_marker_pull'] == '0') {
} else {
/* only check if marker file exists if they are using the XML method */
wpgmza_check_if_marker_file_exists($wpgmza_current_map_id);
}
$map_width_type = stripslashes($res->map_width_type);
$map_height_type = stripslashes($res->map_height_type);
if (!isset($map_width_type)) { $map_width_type == "px"; }
if (!isset($map_height_type)) { $map_height_type == "px"; }
if ($map_width_type == "%" && intval($res->map_width) > 100) { $res->map_width = 100; }
if ($map_height_type == "%" && intval($res->map_height) > 100) { $res->map_height = 100; }
$map_attributes = '';
if(isset($atts['width']) && $atts['width'] != 'inherit')
$map_attributes .= "data-shortcode-width='" . esc_attr($atts["width"]) . "' ";
if(isset($atts['height']) && $atts['height'] != 'inherit')
$map_attributes .= "data-shortcode-height='" . esc_attr($atts["height"]) . "' ";
// Using DOMDocument here to properly format the data-settings attribute
$document = new WPGMZA\DOMDocument();
$document->loadHTML('<div id="debug"></div>');
$el = $document->querySelector("#debug");
if(isset($res->other_settings) && is_string($res->other_settings))
{
$temp = clone $res;
$temp->other_settings = unserialize($res->other_settings);
$el->setAttribute('data-settings', json_encode($temp));
}
else
$el->setAttribute('data-settings', json_encode($res));
$html = $document->saveHTML();
if(preg_match('/data-settings=".+"/', $html, $m) || preg_match('/data-settings=\'.+\'/', $html, $m))
{
$map_attributes = $m[0];
}
else
{
// Fallback if for some reason we can't match the attribute string
$escaped = esc_attr(json_encode($res));
$attr = str_replace('\\\\%', '%', $escaped);
$attr = stripslashes($attr);
$map_attributes = "data-settings='" . $attr . "'";
}
$map_attributes .= " data-map-id='" . $wpgmza_current_map_id . "'";
$map_attributes .= " Data-maps-engine='" . $wpgmza->settings->engine . "'";
// Using DOMDocument here to properly format the data-shortcode-attributes attribute
$document = new WPGMZA\DOMDocument();
$document->loadHTML('<div id="debug"></div>');
$el = $document->querySelector("#debug");
$el->setAttribute('data-shortcode-attributes', json_encode($atts));
$html = $document->saveHTML();
if(preg_match('/data-shortcode-attributes=".+"/', $html, $m) || preg_match('/data-shortcode-attributes=\'.+\'/', $html, $m))
{
$map_attributes .= ' ' . $m[0];
}
else
{
// Fallback if for some reason we can't match the attribute string
$escaped = esc_attr(json_encode($atts));
$attr = str_replace('\\\\%', '%', $escaped);
$attr = stripslashes($attr);
$map_attributes = " data-shortcode-attributes='" . $attr . "'";
}
if(!empty($atts['classname']))
{
$map_attributes .= " class='" . esc_attr($atts['classname']) . "'";
}
if (!$map_align || $map_align == "" || $map_align == "1") { $map_align = "float:left;"; }
else if ($map_align == "2") { $map_align = "margin-left:auto !important; margin-right:auto; !important; align:center;"; }
else if ($map_align == "3") { $map_align = "float:right;"; }
else if ($map_align == "4") { $map_align = ""; }
$map_style = "style=\"display:block; overflow:auto; width:".$res->map_width."".$map_width_type."; height:".$res->map_height."".$map_height_type."; $map_align\"";
$map_other_settings = maybe_unserialize($res->other_settings);
// NB: "False" represents above, this should really be changed to something clearer or constants should be used in the very least
if($map->storeLocator && empty($map->wpgmza_store_locator_position))
$ret_msg .= $map->storeLocator->html;
/* Developer Hook (Filter) - Legacy hook, allowing for changes to the map div from shortcode */
$ret_msg .= apply_filters("wpgooglemaps_filter_map_div_output", "<div id=\"wpgmza_map\" class=\"wpgmza_map\" $map_attributes $map_style>",$wpgmza_current_map_id) . "</div>";
// NB: "True" represents below, this should really be changed to something clearer or constants should be used in the very least
if($map->storeLocator && !empty($map->wpgmza_store_locator_position))
$ret_msg .= $map->storeLocator->html;
$wpgmza_settings = get_option("WPGMZA_OTHER_SETTINGS");
$core_dependencies = array();
$scriptLoader = new WPGMZA\ScriptLoader($wpgmza->isProVersion());
$v8Scripts = $scriptLoader->getPluginScripts();
foreach($v8Scripts as $handle => $script)
{
$core_dependencies[] = $handle;
}
$apiLoader = new WPGMZA\GoogleMapsAPILoader();
if($apiLoader->isIncludeAllowed())
{
$core_dependencies[] = 'wpgmza_api_call';
if($wpgmza->settings->engine == 'google-maps')
{
// TODO: Why is this not handled by the API loader?
wp_enqueue_script('wpgmza_canvas_layer_options', plugin_dir_url(__FILE__) . 'lib/CanvasLayerOptions.js', array('wpgmza_api_call'));
wp_enqueue_script('wpgmza_canvas_layer', plugin_dir_url(__FILE__) . 'lib/CanvasLayer.js', array('wpgmza_api_call'));
}
}
// TODO: Come up with a proper solution. Gutenberg dependency breaks developer mode
$gutenbergIndex = array_search('wpgmza-gutenberg', $core_dependencies);
if($gutenbergIndex !== false)
array_splice($core_dependencies, $gutenbergIndex, 1);
if(isset($wpgmza_settings['wpgmza_maps_engine']) && $wpgmza_settings['wpgmza_maps_engine'] == 'open-layers')
{
if($index = array_search('wpgmza-google-vertex-context-menu', $core_dependencies))
array_splice($core_dependencies, $index, 1);
}
/* Developer Hook (Action) - Enqueue additional frontend scripts */
do_action("wpgooglemaps_hook_user_js_after_core");
$res = array();
$res[$wpgmza_current_map_id] = wpgmza_get_map_data($wpgmza_current_map_id);
$wpgmza_settings = get_option("WPGMZA_OTHER_SETTINGS");
/* Developer Hook (Action) - Enqueue additional frontend scripts */
do_action("wpgooglemaps_basic_hook_user_js_after_core");
/* Developer Hook (Action) - Localize additional frontend script variable */
do_action("wpgooglemaps_hook_user_js_after_localize", $map);
if(empty($wpgmza->settings->disable_autoptimize_compatibility_fix))
{
// Autoptimize fix, bypass CSS where our map is present as large amounts of inline JS (our localized data) crashes their plugin. Added at their advice.
add_filter('autoptimize_filter_css_noptimize', '__return_true');
}
return $ret_msg;
}
Code file location:
wp-google-maps/wp-google-maps/includes/class.shortcodes.phpConclusion
Now that you’ve learned how to embed the WP Go Maps (formerly WP Google Maps) Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply