Overview
I get a lot of requests from people who want to put up a google map in their blog (which most of the time is WordPress) but they have no idea how to do it. Unlike embedding a google map in a standard web page , a simple pasting of the map script will not work in WordPress.
The best way to show a google map as part of a WordPress blog post is to make it a WordPress Plugin. For most non developers, creating a WordPress plugin is simply not worth the trouble as it takes too much knowledge of PHP and the WordPress API . For PHP developers who are proficient in PHP but have never worked with WordPress code before, the task of making a WP plugin can be a little daunting at first. It takes some time and some trial and error to understand how a WP plugin works.
For both the above kinds of people I thought it would be a good idea to create a simple Google map plugin for WP which can be used by anyone who just wants to show a map in WP. This basic plugin can also form a base for creating a more complex map plugin if required.
It is assumed the reader already knows how to paste a google map in a standard web page. I am just going to deal with the basics of writing a WP plugin and how to plug the google map into it.
The Plugin Deployment
The plugin has the following files :
- index.php – this is the main plugin file
- showmap.php – this is the code which actually displays the map
- /includes/globals.php – some global variables required by the plugin
- /includes/scripts.js – the javascript to control the map display via Google Maps API
The plugin is available as downloadable zip file here. To install the plugin in your WP blog
- Unzip the contents of the zip in the wp-content/plugins directory.
- After unzipping all the files should have gone into a folder called wp-content/plugins/gmapplugin.
- Edit the file globals.php in the includes folder and change $g_docRoot to reflect the base path of your gmapplugin folder , change the $g_serverName to reflect the domain name of the website, $g_map_key to reflect the google map api key for your domain.
- Go to wp-admin, login as admin , go to the Plugins page and activate the plugin.
- After this, the homepage, all the posts and all the pages should show the sample map alongwith whatever original content is present.
How It Works
The main plugin file is index.php. The entire plugin is created as a class which gets instantiated only once. This class can have any methods or atrributes that is required. WP does not place any restrictions on the internal functioning of the class.
In our class we have defined a method called loadData which gets called in the constructor. For now this method does nothing but can be used to run any initialization tasks required for the class to function.
The main method which handles the displaying of the map is showMap(). This method acts as the main point of contact between the WP blog and the Google map. There are a few WP functions which are used in this function. They are explained below:
- get_bloginfo(‘wpurl’) gets the base url of the WP blog
- $post->post_type returns either “post” or “page” depending on what the current content is . This helps you distinguish between the two kinds of content in WP.
- is_home() returns a true or false depending on whether the current page is the homepage or not.
The showMap() checks whether the current page is the homepage or a post or a content and then shows the map in all three cases.
function showMap($content) {
global $post;
$url = get_bloginfo('wpurl');// this is to get the current WP base url
// check if this is a post
if ($post->post_type == "post" && !is_home()) {
$more_content = file_get_contents($url . "/wp-content/plugins/gmapplugin/showmap.php");
return $more_content. $content ;
}
// other pages and not homepage
if ($post->post_type == "page" && !is_home()) {
$more_content = file_get_contents($url . "/wp-content/plugins/gmapplugin/showmap.php");
return $more_content . $content;
}
else {
// show map in homepage
if (is_home()) {
$more_content = file_get_contents($url . "/wp-content/plugins/gmapplugin/showmap.php");
return $more_content. $content ;
}
}
return $content;
}
There is a function at the bottom of index.php called add_filter(‘the_content’, array(&$GMS, ‘showMap’));
This is an inbuilt WP function which adds third party code to its event queue or processing pipeline. This line tells it to add this class into the list of classes which will filter “the content”
Enhancements and Changes
It is unlikely that anyone would want to show a map in every post or page. To fix that, you can filter on the $post->ID for showing maps only if particular posts are shown.
You can also filter on custom fields added to the post while editing it. This can be done using get_post_meta($pageId, ‘custom_field_tag’, true) . If the current post has this particular custom field value then it will return true and the map can be shown.
Leave a Reply