How to use Google Maps with WordPress

Google Maps are the best thing ever¹, but there can be problems embedding them in blog posts. I use maps a lot over at Run Spot Run when I review a dog park, for example. I would commonly find that the map I thought I’d selected wasn’t what would display.

After considerable messing about I found the most efficient and easiest way to get the right map on the right page.

Recently I received this enquiry:

I just went on your site, Run Spot Run, and noticed you had Google Maps installed and working.

I have been trying to use them on my new site as well but as of yet no one has been able to help me. Is there any way possible that you could give me some direction on how to do it?

My solution is to use Ben Huson’s WP Geo plugin for WordPress. Here’s how it works.

Install and Activate the plugin on WordPress

Search for the WP Geo plugin.

1. Log in to your WordPress Dashboard and click the Add New link under Plugins.
2. Search for WP Geo in the Search Plugins page that appears.
3. Click the Install link, then click the Install Now button on the window that appears. The plugin is installed, and a confirmation message appears.
4. Click the Activate Plugin Action that is displayed after the confirmation message.

Set Options for the plugin

Click the WP Geo link under Settings in your blog’s Dashboard. The WP Geo Settings page is displayed.

Obtain a Google API Key.

The first thing you must do is obtain a free Google API Key.

Click the Google API Key link on the WP Geo Settings page and follow instructions to obtain a Key. Enter the Key in the Settings page.

Then select the other Settings you wish to use for maps on your blog. Save Changes when you’ve finished.

Add the short code to a Post

Add the short code to your Post (in HTML).

Now create a blog post in the usual way. Once you’ve written your Post decide where you want to include a map.

Make sure you’re in the HTML view and insert this short code: [wp_geo_map] where you want the map to appear.

I actually wrap the code in a div, with a class attached so that I can apply styling if I want to.

Select the location on the map

Search for a location.

When you installed the plugin it added a section to the Add New Post or Edit Post page. Scroll down until you see it. It’s probably right at the bottom.

Search for a location using the Search box. Zoom in and out or move the map as you wish, and if necessary, check the Save custom map zoom for this post box.

Publish or Save your Post

Now publish your Post and view it on the web. The map will appear at the place where you added the short code.

Here’s the Post I used for my example screenshots: A fine walk in Taitua Arboretum in Hamilton.

Thank the plugin developer

If you use the plugin make sure to let the developer, Ben Huson, know it’s useful to you. On the plugin’s Settings page you’ll see links to make a donation, or buy him something.

Do you use Google Maps on your WordPress blog? What’s the best way you’ve found to do it? Let us know in the Comments.

¹ KnowIT: Give visitors a Google Map.

2 comments

Tagged as: Google Maps, plugins, WordPress

You may also like -

Need help with Google Maps?WordPress makes a great Content Management System (CMS)Make MacTips Magic month 2012MacTips.infoSet focus and exposure for iPhone photosMacTips.infoHow to read Kindle books on your Mac, iPad or iPhoneMacTips.info