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.
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"); | |
| ?> |
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"]
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. 🙂