Embed responsive Google Map into WordPress post or page without plugin

1 Comment / Web Development / By

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.

<?php
// Google Map embed short code
// Usage: [googlemap src="you_url"]
function GoogleMapEmbed($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '100%',
"height" => '480',
"src" => ''
), $atts));
return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'" ></iframe>';
}
add_shortcode("googlemap", "GoogleMapEmbed");
?>
view raw functions.php hosted with ❤ by GitHub

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"]

1 thought on “Embed responsive Google Map into WordPress post or page without plugin”

  1. andyrenard

    Thank you very much. It worked like a charm.
    Google search console was saying that my page wasn’t mobile-friendly. It took me hours to figure out that it was because the embedded map.
    You saved my day. 🙂

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Wavesdream

Subscribe now to keep reading and get access to the full archive.

Continue reading