How to Create Shortcode for Google Maps Embed Code

Do you want to display Google maps on your website? To display Google maps we need an embed code.

Google maps provide multiple options to get this embed code. Learn more about the different ways to get this embed code.

Now with this embed code, you can simply paste this into posts, pages, and widgets.

What if the embed code changes in the future or you want to switch to a different maps provider? You have to find and edit all the places where the code was inserted.

In this article, I’ll share how we can create and use shortcodes to reuse code snippets like Google maps embed code.

What is a Shortcode? #

Shortcodes are tiny pieces of text within square brackets. Example [gallery]. When these shortcodes are used inside posts, they will be replaced with some content. This [gallery] shortcode will display a gallery of images.

There are few inbuilt shortcodes in WordPress that you can use inside posts, pages, and widgets. They offer some functionality as per its name.

We can create these shortcodes using PHP code. This becomes difficult to manage. Hence we can use a WordPress plugin like Shortcoder.

Creating Shortcode for Google maps embed code #

Shortcoder is a free WordPress plugin to create shortcodes for code snippets like HTML, CSS, and JavaScript.

When we create a shortcode we get a shortcode like [sc name="my-shortcode"]. We just need to use this shortcode around WordPress.

We will now use this plugin to create a shortcode and set the Google maps embed code as the shortcode content. So wherever the shortcode is used, it gets replaced with the Google maps embed code, and Google maps is displayed.

Using Shortcoder #

Head over to Plugins > Add new page. Search for “Shortcoder”, click install, and activate the plugin.

Go Shortcoder > “Create shortcode” page.

Give a name for the shortcode. Let’s name it “google-maps”. Our shortcode will be [sc name="google-maps"] now.

In the shortcode content, paste the Google maps embed code. There are different ways to get the Google maps embed code. If you already have one, you can paste that too.

Save the shortcode and that’s it.

You can now use the shortcode [sc name="google-maps"] in the places where you want to show Google maps.

Change Maps location by Passing Variables #

Sometimes you want to use the shortcode but slightly change the shortcode content. In this example of Google maps, you may want to change the “location” for which the map is displayed.

Method 2 and 3 in the Google maps embed codes article shares code where the location can be changed in the iframe URL.

In shortcoder, we can change this “location” dynamic. Delete the “location” text in the embed code and instead select “Insert shortcode parameters” > “Custom parameter” to insert a variable in place.

Enter a name for the custom parameter. Example: location. You can also set a default value for this custom parameter.

Now this location parameter can be changed while using the shortcode like [sc name="google-maps" location="New York"]

You can add more parameters to the shortcode content like this and change the text while using the shortcode. This way a shortcode can be reused but still give the ability to tweak the content. You can find more examples in the Shortcoder documenation page.

Conclusion #

In this article, we used the Shortcoder WordPress plugin to create a shortcode for Google maps embed code.

We also added a little dynamicity using a custom parameter to change the Google maps location whenever it is used.

Hope this article was useful. If you have any comments, please do share them in the comments section below.