Geomashup 1.2 – Dynamic Google map to display all your posts


Right here is a great tutorial for all you wordpress bloggers out there. Now you can show all your posts on 1 giant Google map, and display 1 post at a time and the location.

See it in action on our new map page

geomashup Geomashup 1.2   Dynamic Google map to display all your posts

Dynamic Google map with timer and loop

We got the idea when we started work on a couple of exciting websites this week, one for professional wildlife photographer, Andy Gooch, and the other is a collaboration project with John Colebrook from Pixelcase, showcasing the best aerial virtual tours from around the world, on a site called toursfromabove.com.

In thinking about the design we decided it would be nice to showcase there images/virtual tours on one big map, with a timer and loop set on the infowindows to show a post/image for 10 seconds and then display another post/image and present the locations in an attractive way on a Google map.

After a bit of research on the various mashup sites out there, we were pleased to find a plugin that did half the job. Geomashup a plugin created by Dylan Kuhn allows you to geolocate your posts and show them all on 1 big map. It comes with a great range of options like assigning different markers to your catergories.

The plugin however did not create the dynamic map we wanted so a bit of modding was needed. After a few posts on various forums we were delighted to gain the assistance of Google map maestro’s Mike Williams and Dylan Kuhn, who both helped develop our code and made our idea come true.

So…. first of download Geomashup – once installed, you will be prompted to visit the Google maps api site to obtain your unique key. Enter this in the correct field on the Geomashup options page now found in your wordpress admin. Make any settings here you like, the map we will be using is the ‘global map’.

Next copy the custom-sample.js and rename to custom.js, you can also copy example-map-style.css and rename it map-style.css and geo-mashup-info-window.php if you would like more control over the styling of your infowindows. Open your custom.js file and place the following code anywhere in the file…

function customizeGeoMashupMap( properties, map ) {
var counter=0,
cancel=false,
infowindow = map.getInfoWindow(),
loopMap = function() {
if (++counter >= properties.post_data.posts.length) counter = 0;
GeoMashup.clickMarker( properties.post_data.posts[counter].post_id );
if ( ! cancel ) {
setTimeout(function() { loopMap(); },10000)
}
};
// If we don't have a request to open a post, start the tour
if ( ! properties.open_post_id ) {
setTimeout(function() { loopMap(); },10000)
}
// Center info windows when opened
google.maps.Event.addListener( map, 'infowindowopen', function() {
map.panTo( infowindow.getPoint() );
} );
// Cancel the tour if the info window is manually closed
google.maps.Event.addListener( infowindow, 'closeclick', function() {
cancel = true;
} );
loopMap();
}

Upload the custom.js file to your plugins/geomashup directory and the map-style.css and geo-mashup-info-window.php to your theme directory.

Next you need to edit some of your posts. At the bottom of the post edit screen, you’ll find a map. Geolocate where the post/image was made, you can either search using names or just type in the lat and long coord’s. Update your post and do the same on another, so you have at least 2 posts geolocated.

Next place the shortcode for the main map on your map page, which you will also need to assign in the geomashup settings.

And thats it icon smile Geomashup 1.2   Dynamic Google map to display all your posts

View your map page and you should have an infowindow appear on the map showing an excerpt from your post for 10 seconds, it should then close and another infowindow will appear in the place where you have located it on the map. You can change the time it take to display by whatever you like by editing where it says 10000 in the code.

Geolocate all your posts and you then have a great way to show of your blog or photogallery. If you would like thumbnail images to appear in the infowindow remember to place the thumbnail in the excerpt box on the post editing page (this will not appear in the main post).

For the wildlife photography site we are going to combine it with yapb (yet and photoblog) plugin, and use different markers for species of animals, the map will be a great way to show where the wildlife images were taken. We will post it when finished, until then check this example we made on the toursfromabove website.

We would like to do this with all our 360 panoramas on this blog but I think its gonna take a little while as we have well over 250 posts to locate icon razz Geomashup 1.2   Dynamic Google map to display all your posts

If you end up using this code, let us know we’d love to see it in action. You can find all the docs and information you need on the Geomashup Google code pages and if you enjoy that be sure to check Mike Williams Google Maps API Tutorial’s it is a fantastic resource.

Be Sociable, Share!
This entry was posted in Tutorials and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

9 Comments

  1. Posted January 23, 2010 at 5:16 pm | Permalink

    Nice, thanks for writing that up! Note that I don’t recommend changing any files in the geo-mashup directory, see http://code.google.com/p/wordpress-geo-mashup/wiki/Documentation#Custom_JavaScript for an alternate method. Cheers!

  2. Posted January 23, 2010 at 8:41 pm | Permalink

    Hi Tom,

    Fantastic site, fantastic tutorial. I subscribe to the same Geo-Mashup group and when I read your post to Dylan about the stuff you and Mike had done on your equallay fantastic tours from above website, and the other unknown wildlife site, I thought “wow, can’t wait to try this out” on my own site.

    I set up the Wilkinson’s World Website and map following the Geo-Mashup Tutorial. Much toil and trouble and reading up. All worth it in the end with the results.

    I have done exactly what you mentioned in the above tutorial…. using the above function and it’s not working for me and I am not sure why?

    In my Custom.js file which doesn’t reside in /wp-content/wp-plugins/geo-mashup but instead in a /wp-content/plugins/geo-mashup-custom folder (on Dylan’s instruction). I don’t think that has anything to do with it, because my map works perfectly for everything else (as you will see).

    I already had the same function present to show a Google Earth button and a mouse scroll wheel zoom function. So I added your code to the same function… but still no joy. I tried it on it’s own as well, but it does nothing.

    Here is my custom function:

    function customizeGeoMashupMap ( properties, map )
    // Mouse Scrolling Function & Google Earth Plugin
    {
    map.addMapType(G_SATELLITE_3D_MAP);
    map.enableScrollWheelZoom();
    // Dynamic infowindow show every 10000 milliseconds
    var counter=0,
    loopMap = function() {
    if (++counter >= properties.post_data.posts.length) counter = 0;
    GeoMashup.clickMarker( properties.post_data.posts[counter].post_id );
    setTimeout(function() { loopMap(); },10000)
    };
    loopMap();
    }

    Is there anything else you did? Perhaps in the actual plugin itself. Most posts on the site have used the Geo-Mashup plugin, whereby the post is assigned a map co-ordinate so the post can appear on the map in an information window.

    Tom, any help would be much appreciated.

    Cheers,

    Mike

  3. Posted January 23, 2010 at 9:08 pm | Permalink

    Are you using the new or old version of the plugin? There is an alpha version? I am using GM 1.2.10

  4. Posted January 23, 2010 at 9:13 pm | Permalink

    Hi Tom,

    Sorry – it’s working… my Mozilla browser was caching the site. I removed the Google Earth code out of the function customizeGeoMashupMap ( properties, map ) and then noticed it was still present… so I thought of loading the site into another browser and hey presto, it works…. it’s so awesome!!!!

    Again thank you for a brilliant function!

    Cheers,

    Mike

  5. Posted January 23, 2010 at 10:06 pm | Permalink

    Mike – good point about versions. It would be good to mention in the tutorial that this will only work with Geo Mashup 1.2. In 1.3 there will be at least one variable name change (post_data to object_data).

  6. Posted January 23, 2010 at 11:20 pm | Permalink

    Hey Mike and Dylan,

    Thanks so much for these useful comments I’ll amend the tutorial tomorrow and install 1.3 on another site so I can get the code working for that version too.

    Mike – I tried latest code with Google earth and it does work but there maybe a possible bug in that the maptype options sometimes disappear when in Google earth mode – please check this with Dylan if it happens – you can try

    function customizeGeoMashupMap( properties, map ) {
    map.addMapType(G_SATELLITE_3D_MAP);
    map.enableScrollWheelZoom();

    var counter=0,
    cancel=false,
    infowindow = map.getInfoWindow(),

    loopMap = function() {
    if (++counter >= properties.post_data.posts.length) counter = 0;
    GeoMashup.clickMarker( properties.post_data.posts[counter].post_id );
    if ( ! cancel ) {
    setTimeout(function() { loopMap(); },10000)
    }
    };

    // If we don’t have a request to open a post, start the tour
    if ( ! properties.open_post_id ) {
    setTimeout(function() { loopMap(); },10000)
    }

    // Center info windows when opened
    google.maps.Event.addListener( map, ‘infowindowopen’, function() {
    map.panTo( infowindow.getPoint() );
    } );

    // Cancel the tour if the info window is manually closed
    google.maps.Event.addListener( infowindow, ‘closeclick’, function() {
    cancel = true;
    } );
    loopMap();
    }

    cheerz,

    tom

  7. John Myrstad
    Posted February 1, 2010 at 9:41 pm | Permalink

    Hi folks. ( Tom and Thomas )

    Small world. Just about what I`m planning for my 360 aerials ;)

  8. Dom
    Posted March 24, 2011 at 7:04 am | Permalink

    this is a great feature, but for some reason, the info window is not centering.

    Here are the tags I am using.

    [geo_mashup_map map_content="global" width=500 height=500 zoom=7 show_future=false marker_select_info_window=true marker_select_center=false marker_select_highlight=false marker_select_attachments=true]

    Any suggestions would be appreciated.

  9. Posted April 22, 2011 at 5:49 am | Permalink

    HI Dom, Just seen your message – sorry for this delay but did you try center in the Global options, via geomashup admin ?

    best wishes,

    tom

Post a Comment

Your email is never published nor shared. 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>