Insert Google Maps Using a Shortcode Without Using a Plugin

How to Insert Google Maps Using a Shortcode Without Using a Plugin

in Shortcode
Google+ LinkedIn

Google Maps is probably one of the best services out there for people to quickly get directions online. For business point of view, there are number reasons, why you should embed a Google map into your WordPress website. Whether you want to guide your users to your physical location or maybe you are just using Google map for a background graphic only, it’s always nice to create rich content that are useful and highly interactive. So in this tutorial, I will show you how to insert Google maps using a shortcode in WordPress. You may also be interested in knowing how to add PayPal donation button with shortcode too.

There are many plugins available in official plugin repository to get this job done but it’s really not that complex to embed Google maps into WordPress posts and pages. Google maps actually provides copy-and-pastable iframe code that is really quick and easy to snag. All we need to do is to create a function for our shortcode to insert Google map URL in right place. So here is the code snippet that you can add in your theme’s function.php file to create Google maps Shortcode.

// insert Google maps using a shortcode
function wpcs_googlemap_shortcode( $atts, $content = null ) {

    extract( shortcode_atts( array(
        "width" => '640',
        "height" => '480',
        "src" => ''
    ), $atts ) );

    return '<iframe src="' . $src . '&amp;output=embed" width="' . $width . '" height="' . $height . '" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>';

}
add_shortcode( "googlemap", "wpcs_googlemap_shortcode" );

Now you can insert Google maps using a shortcode in any WordPress post or page. Here is the example usage of this shortcode.

[googlemap width="400" height="300" src="[map-url]"]

You will need to insert Google map URL in above shortcode which you can get from their website.

Insert Google maps using a shortcode without using a plugin

Share the love

If you like this snippet, share it with others!

2 Replies on "Insert Google Maps Using a Shortcode Without Using a Plugin"

  1. Onde Alugar

    Fantastic, I was looking for how to do this.

    1. Thanks Onde,

      I’m glad you found it useful :)

Leave a Reply

Your email address will not be published. Required fields are marked *