Creating a clickable Google map of blog posts using WP_Query in WordPress

Last year I completed a WordPress site that presents a collection of photographs taken for the Worktown Mass Observation project.

The site uses a custom post type for each photograph. One problem I had to get my head around was how to display all of these photographs on a clickable Google map.

Luckily I found this excellent tutorial by Marty Spellerberg which served as my jumping off point.

Ease of use

Marty’s method uses custom meta fields to pull in the data.  As there are about 800 photographs in the collection I wanted to make it easy for site editors to add the map data.

My workaround involved using Ben Huson’s WP Geo plugin which adds a handy drag and drop Google map to your post editor. Lattitude and longitude coordinates on the Worktown site are pulled from that.

On the front end it wasn’t going to be practical to display 800 or so map positions at once so I needed to adapt Marty’s solution to incorporate the Google MarkerClusterer library to tidy up the map and to make it load quicker for visitors.

The MarkerClusterer visually groups map pointers into a single clickable area. Clicking these automatically zooms the map into an area with a smaller cluster of pointers.

The code

If you check out Marty Spellerberg’s post first, then have a look at the Google MarkerClusterer documentation the following might make a bit of sense 🙂

The following would go in your map page template:

And in your .js file:

And the rest of this junk needs to go in your header (note you also need to have MarkerClusterer.js on your site too):

25 thoughts on “Creating a clickable Google map of blog posts using WP_Query in WordPress

    1. Good question – you can add extra post types to your WP_Query array easily enough. In this example there is a variable (‘locations’) and a marker is applied to each location. I guess you need to find a way to test what post type each location refers to and apply the relevant marker accordingly as you iterate through the loop.

        1. I’m thinking that it ought to be possible to pass a variable, say $posttype to your map.js. Perhaps via the same array that $latlng is in the above example ( $lat and $lon is concatenated in php then the value is passed to the javascript ). Inside your map.js you would test if $posttype = custom then execute custom map marker and so on.

          1. I’ve done it slightly differently – perhaps not as clean but works for my use:

            I put an if statement into the loop that checks the post type and then outputs the marker url for that post type, then in map.js, I just changed the icon line to “icon: locations[i].marker,”

            Ta dah!

  1. @Nathan

    I am trying to do the same but with custom taxonomy (used as a category of a custom post type), can you post an example of your markers part? I can’t get it to work, thanks

    Andy

    1. Hello there, have you placed your markers in the correct folder – in my example “http://mydomain.com/wp-content/themes/mytheme/images/marker.png”?

      var mainmarker = new google.maps.MarkerImage('http://mydomain.com/wp-content/themes/mytheme/images/marker.png', new google.maps.Size(40, 33) );
      var shadow = new google.maps.MarkerImage('http://mydomain.com/wp-content/themes/images/marker_shadow.png', new google.maps.Size(40, 33) );

      If you are having problems you might want to try working through Marty Spellerberg’s example here:

      http://martyspellerberg.com/2012/02/tutorial-integrating-wordpress-and-google-maps-api-v-3/

      1. Thank you for your reply! Home page to access Google maps is normal, I set up a template-google-maps.php, use this page to access the Google maps, but does not display the icon. Do you need how to operate? thank you

        1. Have you checked to see if the marker is accessible at the url you have in your code?

          Try pasting the marker url into your browser. It should be visible.

  2. Hi Perry,

    I just wanted to thank you for the wonderful resource you give in this post.
    I struggled a bit to make it work on my site.
    At the end I solved by adding at the end of the map.js:
    google.maps.event.addDomListener(window, 'load', initialize);

    Thanks again

    1. Thanks for the feedback Sacha, it’s always nice to hear from people who have got some use out of the tutorial.

      I’m not sure why the additional code was required in your case but it’s worth noting if anyone else has trouble getting it to work.

      Cheers!

  3. Hi,

    Fantastic post! Really helpful and I’ve got it working perfectly on my site. What I’m doing is a hotel section where each hotel has it’s location that’s added to this map. I’m also doing a simplified version where it just shows one hotel on the map.

    any ideas how to change the zoom level for each map? I’d like to be able to change it on the .php template (there will be 2) rather than the map.js.

    I’ve looked all over the internet, tried ‘fitbounds’ and all sorts but nothing’s worked 🙁

    Cheers
    Russ

    1. Hi Russ,

      Great to hear that you found the tutorial useful.

      I have to ‘fess up and admit I’m not exactly a javascript guru. My guess is that if you can find some way to set the zoom level as a variable within your WP template then you might be able to add it to your map parameters somehow (as set via ‘var map’ in the original map.js).

      In my example the script within the WP template interacts with the map.js

      So I’m guessing this is possible, I’m just not sure how to go about doing it 🙂

      1. That’s what I thought but couldn’t figure it out – tried all sorts and in the end reverted to just loading a different version of map.xml depending on the post type – so annoying but couldn’t bare to spend another minute with Google Maps 🙂

        Cheers for the article!

    1. Thanks for letting me know Brian. I’ll look at this at the earliest opportunity. It happens from time to time, some caching issue that I haven’t been able to get to the bottom of!

    2. Fixed it, despite removing WP Super Cache ages ago Batcache was insisting on serving up an old cached version of the page with the error on it. Now deleted!

  4. hello and thanks for this tutorial wich still works on wordpress!!i had a question regarding this kind of google map code.Do you know if there is a way to filter the post by categories?i created my categories checkbox above the map, but noway to link the checkbox to the post..as the locations array is a loop, i really don’t understand how to link the two files.In html static mode i could do a if (label == locations[i][0 or 1 or 2 here for the nam or whatever] but how can i target the marker class from the jquery file??if ever you have an idea i would really appreciate, as i’m spending days trying to figure it out;..thank you very much

    1. It sounds like you want to do something a bit more dynamic than the code in its current form allows. This sounds more like an Ajax kind of thing which I have no experience of. Perhaps look up using WP_Query with Ajax, I imagine there might be a few solutions out there that the code could be adapted to work with.

Leave a Reply