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

Comments

Post a Comment

Popular posts from this blog

WordPress migrations need an overhaul. Here’s why.

 WordPress migration is the bare necessity of running an active website. All WordPress customers need to deal with the aggravations with migrating their site beginning with one web host onto the next web host. It is known by the web society that WordPress migration is a overwhelming undertaking. This is clear with the by and large wide number of instructional exercises and articles concerning it. Even more importantly, the expenses incurred in this system are a wide sum. In the 21st century, we would look for our prerequisites to be fulfilled intuitively for a comprehensive customer endeavour. For the particular strategies to stay reasonable to this day and age, it is fundamental for the required virtual processes to be quick, i.e. they ought to be simple for the customer. WordPress has profitable strength of 14 years on the web. Even so, after this time, migration must be done manually. This is genuinely tiresome. You will be responsible for content creation an
Post a Comment
Read more

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
Post a Comment
Read more

Covert all date data format from VARCHAR to DATE in any MySQL table

 Converting varchar data to date format in MySQL involves several steps. Here's a method to achieve this: Assuming your varchar date column is named date_column and your table is named your_table, you can follow these steps: Add a New Date Column: First, add a new date column to your table. ALTER TABLE your_table ADD new_date_column DATE; Update New Date Column: Update the newly added date column using the STR_TO_DATE function to convert the varchar dates to date format. UPDATE your_table SET new_date_column = STR_TO_DATE(date_column, 'your_date_format'); Replace 'your_date_format' with the format of the varchar dates in your column. For example, if your dates are in the format 'YYYY-MM-DD', use '%Y-%m-%d'.  Drop Old Date Column: If you're confident that the new date column contains the correct data, you can drop the old varchar date column. ALTER TABLE your_table DROP COLUMN date_column; Rename New Date Column: Finally, rename the new date colum
Post a Comment
Read more