My Simple Travel Map Plugin And Some Good Alternatives

please share:

Recently I built a small personal photo blog for myself. Since one of my biggest passions is traveling I wanted to share good photos from my trips on the blog. I also wanted to feature a prominent travel map on the blog, which would list all the locations I have visited and link to the blog posts about them. Should be no problem I thought. I just need the right plugin.

Naturally I started my search for a good plugin I could use to create a travel map in the official WP plugin directory. Like I expected there are plenty of maps and mapping plugins for WordPress already in there. Most of them however use the Google Maps API, something I did not want for my site since the maps are not customizable enough and in my opinion do not look good.

Luckily there is also the Google Geocharts API, which provides a great alternative. It is meant to create map charts and provides enough settings to customize all colors and most other parameters of the resulting maps. There are much fewer WordPress plugins available that use the Geocharts API however and all of the required location markers for the map to be added to a list manually. I planned to have hundreds of places on my map eventually, so that is too time consuming. I needed something that could list all my posts on a map automatically.

The solution was simple of course: I created my own travel map plugin.

Introducing My Simple Travel Map Plugin

Using bits from existing plugins it just took a few days to piece together a basic travel map plugin for WordPress. The result: You can now see my travel map in action on my personal site.

After completion of my own site it I brushed the plugin up a little more, added a basic settings page and then released it in the WordPress plugin repository under the creative name “Simple Travel Map”.

My WordPress travel map plugin in action
My simple travel map as seen on my photo blog.

That means if you want to create a similar travel map for your own blog you can download my plugin and follow the instructions below. But first a quick look at what the plugin can actually do:

The Features

  • Create a travel map with a nice design, using the free Google Geocharts API.
  • A marker can be placed on the map for each of your posts or pages. A custom field is used to set the location of the post on the map.
  • Each marker on your travel map links to the post when clicking on it.
  • Hovering over a marker opens a popup showing the name and thumbnail image of the post.
  • You can display your travel map in any post or page through a WordPress shortcode.
  • The settings page allows you to quickly modify all colors to make the map blend in with your WordPress theme.

The Limitations

The “Simple” in the name of my plugin is meant as a warning as well. Because I built the plugin for my own purpose it really only does one thing: List posts on a pretty world map. It supports no other maps or regions or other ways to input markers. Keep that in mind when you use it or consider one of the alternative map plugins I have listed below!

How To Use My Simple Travel Map Plugin

1. Installation: Works just like with any plugin hosted in the WP plugin directory. Go to “Plugins > Add New” in your WordPress admin and then search for “simple travel map”. Click “Install” next to the first result and afterwards press “Activate”.

Installing the simple travel map plugin on your WordPress blog

2. Add Locations To Posts: The travel map plugin marks locations on the map based on a custom field found in your posts or pages. That means for each location you want to show you need to add such custom field to the post the location is meant to represent.

To add a custom field manually go to the “All Posts” page in WordPress, click “Edit” next to the post of your choice to get to the WP post editor. Scroll down and find the box titled “Custom Fields”. Then:

  • Locate the “Add New Custom Field” box.
  • Press “Enter New”
  • Enter “location” without quotes as the name.
  • Enter your desired location as the value, e.g. “Paris, France” or “Barcelona”. Any city or country works.
  • Press the “Add Custom Field” button.

After doing this the first time the “location” field will be saved and you can simply select it from the dropdown instead of pressing “Enter New” for future posts.

Add a custom field to show in your travel map

For my own travel map I have used a more automated approach and generated both the custom fields and posts while uploading my photos. You can read more about my process of creating a photo blog semi-automatically in this separate post.

Note: If you can not find the “Custom Fields” box at all click on “Screen Options” at the top right of your editor. In the box that slides down set a checkmark next to “Custom Fields” and it will show up immediately (scroll down again).

3. Travel Map Settings: Go to “Settings > Simple Travel Map”. All you need to do here for now is press the “Index Post Locations” button.

This will check the meta value for all your posts and calculate the exact coordinates of the locations you set. We do so because locations by coordinates are much faster to display on the Geocharts map. Without them each of your locations would load one by one.

Once done you get results of all locations. If there was a problem, e.g. because a location could not be transformed into its coordinates value you get shown the post ID that happened for.

Simple travel map plugin settings

Further down you can use the settings to customize the color of your travel map or specify a fixed width.

4. Place Your Map Somewhere: This one is easy. Simply open a post or page of your choice in the WordPress editor (by going to “All Posts” > “Edit”) or start creating a new one. To display your travel map place [simple-travel-map] in the content anywhere. This shortcode will get replaced with the map when viewing the post.

Parse shortcode to display your travel map

After saving the post click to view it and you can see your new travel map!

Some Good Alternative WordPress Travel Map Plugins

I warned you above: My plugin is really “simple” and will not be right for every purpose. If you know how to code you might be able to customize it to do what you want. If not I present you some of the best plugins to create a travel map with WordPress below, which I found during my initial research:

Map My Posts

What it does: Despite its rather bad rating this is a very promising plugins with lots of settings. It supports both the Google Geocharts API and the Maps API, can display multiple travel maps and much more. It also does not require manual input since it uses your existing taxonomy names to populate the travel map.

Why it was not for me: Even though it is called “Map My Posts” it does actually map categories or tags. That means you get a marker for each of your categories and clicking on the marker brings you to the category page. Since I really wanted to “map posts” I needed to look elsewhere.

Nomad World Map

What it does: This is the only plugin discussed in the post which can show routes on a travel map. It connects any locations you input and displays them on a zoomable Google map in your WP blog. You can see a good example here.

Why it was not for me: It uses the Google Maps API and requires manual input for each stop of your route. There is also only support for 1 travel route per map right now.

Google Interactive Maps

What it does: Create maps with the Google Geochart API, all kinds of them actually. This plugin is not specifically meant for travel maps and thus has lots of settings to create all different kinds of geocharts. From my research it seems to be the most comprehensive geochart plugin available for WordPress. Please note though that it is premium only and because of that I did not test it.

Why it was not for me: As with many of the maps plugins all locations need to be entered into a list in the plugin settings one by one, which is not something I wanted to do for 200+ posts.

I hope this post was useful and helped you create your own map of places you have visited. If you have problems with using my travel map plugin feel free to let me know in the comments and I will try to help!

Did you use my WordPress travel map plugin? Feel free to share the map you created in the comments below!

About Thomas Höfter

I am a WordPress plugin developer from Germany. Some might know me from my WP Robot plugin or one of my free plugins but most don't know me at all. To change that you can write me a message or find me on Google+.

36 Comments


  1. Hi Thomas, love the idea of a map that is kind of automatically created based on the location field in the post. I will await your other post on doing this with impatience.

    One question, you say that it works with cities and coutries. Does it mean that it couldn’t use more precise addresses (ie street name and number) ?

    Reply

    1. Hi Stephanie, glad you like the idea of my travel map plugin. It definitely works with precise addresses as well. I mostly did not mention that because the difference would not be noticable over just using the city name since it is a world map. The Google Geocoding API is used to find the coordinates.

      Reply
  2. Rylei

    I love, love, love this. It’s so clean unlike the other sites. And so easy to use with your directions, even for a first time blogger. Thank you so much! Mine came out a bit lighter than yours (not sure why? lol) but it still looks phenomenal.

    Reply

    1. Hey, glad to hear you like it! You can easily change the colors of your travel map on the settings page. Possibly I tweaked the colors of my map after setting the defaults of the plugin and thats why they don’t match out of the box.

      Reply

  3. Hi Thomas,
    First i would like to say , great job with this map.I found you map and i was so extcited to use it . I got the right plugin and i installed everything like is in your manual. I have one problem when i post shortcode on my travel page im getting information
    compatible data table: Error: Table contains more columns than expected (Expecting 2 columns)
    Can you hepl. when im goining to screen option, under screen layout i have just max 2 columns. my theme is Blogfolio by Themify .

    Reply

    1. Hi Anita,

      did you use the “Index Post Locations” button on the Simple Travel Map plugin settings page? When you did so you should have seen the list of locations that were found for your posts and now the settings page should say “X locations indexed”. Is that the case?

      Reply

      1. I just started my blog.. so I trying to set up everything firs so I don’t have any posts ( with any location mention) yet , is that could be a case??

        Reply

        1. Sorry for the slow response, I did not see your new comment here. Yes that would be the problem – the map needs some data to be rendered correctly. Simply create some test post and add a location custom field. When you press the index post button now the map should show up correctly.

          Reply
  4. Sarah

    Hi Thomas, you’re plugin is great! Really easy to use and looks super clean.

    I just wanted to know how I would about changing the background colour of the map (not the regions) and if it were possible?

    Cheers!

    Reply

    1. Hi Sarah, changing the background color of the travel map is not possible currently. It should be an easy thing to add though, I will have a look at that when I find some time.

      Reply

  5. Your map was just what I was looking for! Thank you! One question… Can I have multiple locations connected to one post? For some reason, only the first location is showing up on the map… Thanks again!

    Reply

    1. Unfortunately connecting multiple locations to one post for the travel map is not possible currently. I will keep that in mind though and see if it would be easy to add with an update (which I think it might be).

      Reply

      1. Thanks, Thomas! Unfortunately, we get behind on our posts and end up combining destinations. Is there a way to just add the location on the map without it actually being tied to a post?

        Reply

        1. No, adding locations to the map manually is not possible as well (I did warn it is a simple plugin! ;), at least not without modifying the code. What you could try for now is create an empty draft post in your blog with the location set. That should show up in the travel map but is of course no great solution.

          Reply

  6. I’ve just built a new site ready for our travels and this map ads some great functionality, so thanks very much!

    The only problem I find is the map gets a bit condensed if you add multiple posts in one reason – a zoom feature would be awesome!

    If you ever decide to make this a less-simple travel map I would be very greatful :D

    Reply

    1. Hi Paddy,

      there is a zoom feature actually. Once there are many dots close to each other a “magnifying glass” should open when hovering over them on the travel map. This is a feature of the Google Charts API used for the maps, which also means that there is not much I can do to change or customize that unfortunately.

      I will definitely keep on working on the travel map plugin when I find some time to dedicate to my personal site. :)

      Reply

      1. Thanks, Thomas!

        That is the one feature which I really wanted :)

        I’ll wait and see!

        :)

        Reply
  7. Martin

    Good Plugin, but I had to find out myself that it’s not working on “private” sites! After about 1h –.–

    Reply
  8. reza

    hi thomas, this great plugin, but one question, can I zooms to a specific country ?

    Reply

  9. Hi Thomas,

    Awesome plugin, just wanted to know if it’s possible (and if so what code do I need to look at) to edit what’s in the tooltip? I wanted to remove the bullet points and centre the text like you’ve done in your demo: http://thomashoefter.com/

    Thanks!
    – Tom

    Reply

    1. Hi Tom,

      the tooltip does automatically show the post title and the post thumbnail (featured image of your post). Unfortunately the options the Google API gives to customize that are very limited.

      I checked the travel map on your site and the reason for the bullet points is the CSS styling of your WordPress theme I would guess. Maybe you could confirm that by temporarily switching the theme to see if they go away?

      Reply

      1. Seems it’s fine when switching to 2014. Now the mission to find out which CSS is causing the problem :(

        Thanks for your help anyway! :)

        Reply

        1. In reply to the previous comment about the styling of the tooltips, I came across the same scenario and corrected the issue with this CSS:

          #chart_div ul{
          padding-left:10px;
          margin-left:0px;
          }

          #chart_div ul li{
          list-style-type:none;
          }

          Hope this helps

          Reply

  10. Hi Thomas,

    Great plugin! It really bailed me out on a recent project for a client when it was discovered that the latest version of Mapify Pro was having major issues with my client’s theme — site launch in 1 week. Yikes.

    In reply to the previous comment about the styling of the tooltips, I came across the same scenario and corrected the issue with this CSS:

    #chart_div ul{
    padding-left:10px;
    margin-left:0px;
    }

    #chart_div ul li{
    list-style-type:none;
    }

    That fixed that.

    I also ran across an issue on mobile devices where it’s difficult to actually click on the circle icons to get to the appropriate post — so I modified 1 line of code in the plugin’s .php file. At around line 258, added an link tag to the post permalink (see below):

    if(!empty($thumbnail)) {
    $tncode = ‘‘;
    } else {
    $tncode = ”;
    }

    That makes the image a link to the post for touch devices were the tooltip won’t automatically go away.

    Now the issue is that when you click on the active tooltip on a touch device, the tooltip does go away, not allowing the photo link to take you to your post. So I added one more CSS condition for mobile device screen sizes:

    @media only screen and (max-width: 1024px) {

    #chart_div ul::after {
    content:”Mobile users: Please hold down on photo.”;
    font-style: italic;
    padding-left:10px;
    margin-left:0px;
    }
    }

    It’s not perfect, as I’d rather have the tooltip not disappear on touch devices, but it gets the job done.

    Again, thanks so much for this plugin, it really saved me.

    Ken

    Reply

    1. Hi Ken,

      great, thanks for posting that here. I will see if I can add it to the next version of the plugin.

      Reply

  11. Hi man!
    Great stuff, love the simplicity but something went wrong… I get this:
    Location not found: [...] – OVER_QUERY_LIMIT

    when I try to associate with an actual custom_field I have been filling all my posts with. It does not seem the format is wrong it seems the plugin won’t want to locate them because of a reached quota or something…

    Can you help out on this.
    Thanks

    Reply

    1. Also,
      When trying to add the map to a page, I get the following error in the Console:

      Uncaught TypeError: Cannot read property ‘arrayToDataTable’ of undefined
      > simple_travel_map_draw_markers

      And the map simply don’t show up….
      Damn! I thought I’ve found a great solution!!! Agrrr

      Reply

      1. Hm thats an error I have not heard of before. Can you please try to “restart” your travel map by doing the following:

        1. Edit one of your posts and add a new custom field with the location value (with a different name than you used before).
        2. Go to the Simple Travel Map settings page and enter the new custom field in “Look for this custom field value”.
        3. Check “Clear current index (re-index all posts)” and click the Index button.

        Please let me know if the map shows up after doing that (with the one location set).

        Reply

    2. This error is triggered by the Google API the plugin is using to find the locations for the travel map. The API has an hourly request limit, so all you can do is wait until it is reset.

      Reply
  12. Laxgi

    Hi Thomas,

    nach solch einem Plugin habe ich lange gesucht. Einfach und macht genau das, was ich will.

    Leider gibt es bei mir noch Probleme mit der Darstellung, die werden aber mit meinem Theme zu tuen haben. Bei mir stellt er beim Beitragsbild und der Überschrift jeweils einen Punkt dar. Muss ich mal schauen.

    VG aus Süddeutschland
    Laxgi

    Reply

    1. Hi! Ja, diese Punkte werden höchstwahrscheinlich durch die css-Styles des WordPress themes verursacht.

      Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>