Embed responsive Google Map into WordPress post or page without plugin

From personal blog, travel blog to company web page, we need to embed Google Map to show proper location. There are few WordPress plugins available to serve the same feature. But I always intend to not using WordPress plugins if it can be served by writing code.

We can create a simple WordPress shortcode to enable Google Map embed feature inside post or page.

How to create Google Map embed shortcode?

1.Open functions.php file in your theme folder.

2.Put the following code and save the file.

3.Now in your post or page content editor put the following shortcode where you want to show location.
[googlemap src=”you_url”] Replace your_url with original embed URL.
Example: This is a sample iframe embed code:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30676793.683937494!2d64.43267176362717!3d20.1871395263545!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1461654105290" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

So, the URL will be: https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30676793.683937494!2d64.43267176362717!3d20.1871395263545!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1461654105290
So, our shortcode will be:

[googlemap src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30676793.683937494!2d64.43267176362717!3d20.1871395263545!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1461654105290"]

 

Leave a Reply