How To Create WordPress Shortcode to Easily Integrate a Google Map

Friday 23rd, June 2017 / 22:32 Written by
How To Create WordPress Shortcode to Easily Integrate a Google Map
576 Flares Twitter 0 Facebook 0 Google+ 7 LinkedIn 0 StumbleUpon 569 Filament.io 576 Flares ×

Aside from text, images, videos, ads and others, Google Maps is one of the features commenly used on websites. It is an important tool to emphasize locations like maps of stores, restaurants, shops, tourist spots, offices and other establishments. With Google Maps, users will have a clear idea where your location is, especially if you are recommending for visits or you are targeting specific places in which residents can see your location. Some travel themes for WordPress have map services intrgrated already and you can also use map plugins for jQuery if you need extra features. However, there are simpler, yet smart ways to do it.

Usually, when people integrate Google Maps in web pages, they use Googles embed code directly in the content of a page or post. This is OK, however if the map is used in multiple locations on the site it is hard to maintain and if Google change the format you have hard work in front of you. Another approach I would like to show here is to use shortcodes instead to hide the map script in you WordPress content. With this approach, you do not risk that the WordPress editor mess up the code and then it is easy change the map settings from a single place.

Here is the code you can add to the functions.php file to activate the shortcode.  It is a very basic shortcode with tree parameters for width, height and src (url of the youtube video). Unly src is mandatory since there are defaults for width and height.

function rockable_googlemap($atts, $content = null) {

    //First we extract the parameters from the shortcode call.
extract(shortcode_atts(array(

        “width” => ‘940’,

        “height” => ‘300’,

        “src” => ”

    ), $atts));

    return ‘<div>

    <iframe src=”‘.$src.’&output=embed” frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” width=”‘.$width.'” height=”‘.$height.'”></iframe>

    </div>

    ‘;

}

add_shortcode(“googlemap”, “myshortcode_googlemap”);

When this is done, here’s the shortcode you will insert to your pages or posts.

[googlemap src=”google_map_url”]

clip_image002

Instead of embedding or copying the iframe code from Google Maps, you can just copy the video url and replace the google_map_url in the shortcode example.

You can even control the height and width of your map in the shortcode using this.

[googlemap width=”600″ height=”250″ src=”google_map_url”]

You can use shortcodes for many other useful things and this is just one idea out of many.

576 Flares Twitter 0 Facebook 0 Google+ 7 LinkedIn 0 StumbleUpon 569 Filament.io 576 Flares ×

About the author

Hi I am Pete! I love to work with web design and sometimes dive into some coding. My main focus is WordPress websites.

View all articles by Pete

1 Comments on “How To Create WordPress Shortcode to Easily Integrate a Google Map

Comments are closed.