Skip to main content

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.

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

Comments

Popular posts from this blog

How to choose the right content management system for your website

Creating a website can be an exciting process, but it can also be overwhelming, especially when it comes to choosing the right Content Management System (CMS). A CMS is an essential component of any website, as it allows you to manage and publish your digital content. With so many CMS options available, it can be challenging to decide which one is the right fit for your website. In this article, we will guide you through the process of selecting the perfect CMS that fits your website’s needs, with real examples to help you make an informed decision. Determine Your Website’s Purpose The first step in choosing the right CMS for your website is to determine your website’s purpose. Are you creating a blog, an e-commerce site, or a portfolio website? Different CMS platforms cater to different website types, and choosing the right one will ensure that you have access to the necessary tools and features. For example, if you’re building an e-commerce site, you may want to

A comprehensive guide for best practices and tools to build responsive websites

Building Responsive Websites: Best Practices and Tools In the fast-paced digital world, having a responsive website has become a necessity. With the increasing use of mobile devices and varying screen sizes, it’s crucial to ensure your website looks and functions flawlessly across all platforms. In this comprehensive guide, we’ll explore the best practices and essential tools for building responsive websites that deliver optimal user experiences. Why Responsive Design Matters in Today’s Digital Landscape In today’s mobile-centric era, users expect websites to adapt seamlessly to their devices, whether they’re browsing on a desktop, tablet, or smartphone. Responsive design is the key to meeting these expectations. It allows your website to automatically adjust its layout, images, and content based on the screen size and orientation of the device. By implementing responsive design, you provide a consistent and user-friendly experience, regardless of how users acces

Important WordPress theme functions every developer needs

When we develop any custom WordPress theme we need to use different functions. We need to write those functions in functions.php file of the custom theme. I have prepared some of those basic functions and included in the functions.php file. I have mentioned the usage / procedure to use the function in the same file. You have to download the functions.php file and put it inside your theme folder. Following functions are included in functions.php file. Navigation / Menu Remove default UL markup from wp_nav_menu output Enable featured image with custom dimension Image compression while uploading Remove width and height attributes from inserted images Enable sidebar widget Shorten post / page title by word limit Shorten excerpt by word limit Shorten content by word limit Strip images from content Display the content of a page by page ID Display the content of a page by page slug Anti spam email shortcode inside content editor Change default sender email address for generat