Display the Location in your Posts

With this walk through you will learn to display the location of the posts in your WordPress Posts , Pages or Custom Posts. I will be using a plugin called Geo Mashup Map to implement the map and the category filter.For this tutorial, you need to have some knowledge of WordPress Post types, HTML,CSS and JavaScript.

1. Choose the theme.

You can start from scratch and create a new theme or you can choose any existing theme, for this tutorial I will be using a GPL theme called Tiga developed by Satyra.

2. Activate the Plugin

Download the Geo Mashup Map Plugin and activate it.

geomashup_plugin
Geo Mashup Map Plugin , Install

3.Activate the Plugin.

4. Plugin Settings

Go the the Geo Mashup tab in the Settings Menu. In this tab you will see options Overall, Single Maps, Global Maps and Contextual Maps.

In the overall tab I have done the following settings.

geomashup_settings
geomashup_settings

Most of the Fields are self explanatory. Please note that , if you use Google v2 , you will need an API key.
I just need to collect location for Posts and Pages, you can select other options as well. Now, the next setting is important. I have created a Custom Field for my posts in the UI, so I want the Geo Mashup Plugin to check this custom field and copy back the Geo location details related to the location in this custom field. I have named this field as Location. Additionally I have created , two custom fields that will hold the Geo Latitude and Geo Longitude after the Geo Coding of the address.

Leave rest of the settings as it is.For advance use, you should use rest of the settings as specified in the documentation.

5.Adding details to the Post

After you have done these settings, you can go back to the Posts/Page editor and add the location from the default UI.

Adding Location in Posts
Adding Location in Posts

When you will update any of the post, you will see that the Geo Data is copied to the custom fields, this data is quite useful as you will learn in later chapters of this post series.

You can display the map using the following shortcode in the post.

[geomashup]

Hope , this tutorial is helpful for you. Please share your views.

Leave a Reply

Your email address will not be published. Required fields are marked *