Below, you’ll find a detailed guide on how to add the Very Simple Google Maps Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Very Simple Google Maps Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Very Simple Google Maps Plugin and the shortcodes it provides:
"Very Simple Google Maps is a user-friendly WordPress plugin that effortlessly integrates Google Maps into your website. It simplifies map embedding, providing an intuitive and seamless mapping experience."
- [vsgmap]
Very Simple Google Maps [vsgmap] Shortcode
The Very Simple Google Maps shortcode is a tool for embedding Google Maps into your WordPress posts or pages. By using the shortcode [vsgmap], it allows you to customize the alignment, dimensions, address, and zoom level of the map. It also enables you to add an info window and choose the map type. This shortcode generates an iframe that displays the Google Map based on your specifications.
Shortcode: [vsgmap]
Parameters
Here is a list of all possible vsgmap shortcode parameters and attributes:
align
– Determines the alignment of the map on the pagewidth
– Specifies the width of the map in pixelsheight
– Specifies the height of the map in pixelsaddress
– The address that will be shown on the mapinfo_window
– Determines which alphabetical marker’s info window is opened by defaultzoom
– Sets the initial zoom level of the mapcompanycode
– The unique identifier for the company locationmaptype
– Specifies the type of map to display (m: map, k: satellite, h: hybrid, p: terrain, e: GoogleEarth)
Examples and Usage
Basic example – Displays a Google map with the default settings (alignment: left, width: 400, height: 380, zoom: 14, map type: m).
[vsgmap address="1600 Amphitheatre Parkway, Mountain View, CA" /]
Advanced examples
Displays a Google map with custom width, height, and alignment. The map is centered on the given address, with a zoom level of 16 and a satellite map type.
[vsgmap align="center" width="600" height="500" address="1600 Amphitheatre Parkway, Mountain View, CA" zoom="16" maptype="s" /]
Displays a Google map with a custom information window. The map is centered on the given address, with a zoom level of 14 and a roadmap map type. The information window is set to ‘B’.
[vsgmap address="1600 Amphitheatre Parkway, Mountain View, CA" info_window="B" /]
Displays a Google map with a custom company code. The map is centered on the given address, with a zoom level of 14 and a roadmap map type. The company code is set to ‘123456’.
[vsgmap address="1600 Amphitheatre Parkway, Mountain View, CA" companycode="123456" /]
PHP Function Code
In case you have difficulties debugging what causing issues with [vsgmap]
shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode("vsgmap", "vsg_maps_shortcode");
Shortcode PHP function:
function vsg_maps_shortcode($atts, $content = null) {
extract(shortcode_atts(array(
"align" => 'left',
"width" => '400',
"height" => '380',
"address" => '',
"info_window" => 'A',
"zoom" => '14',
"companycode" => '',
"maptype" => 'm'
), $atts));
$query_string = 'q=' . rawurlencode($address) . '&cid=' . rawurlencode($companycode) . '&t=' . rawurlencode($maptype) . '¢er=' . rawurlencode($address);
return '<div class="vsg-map"><iframe align="'.esc_html($align).'" width="'.esc_html($width).'" height="'.esc_html($height).'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?&'.htmlentities($query_string).'&output=embed&z='.esc_html($zoom).'&iwloc='.esc_html($info_window).'&visual_refresh=true"></iframe></div>';
}
Code file location:
very-simple-google-maps/very-simple-google-maps/very-simple-google-maps.php
Conclusion
Now that you’ve learned how to embed the Very Simple Google Maps Plugin shortcode, 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