If you'd like the cards/pins to show the full post entries, click here for my other post.
UPDATED June 2015
You can embed the map in a page too, not just as a widget.
Location-tagged Blogger posts
I like using Blogger, and I always geotag the posts on my travel blog using the "Location" setting in the right-hand side of the Blogger compose page.
|Blogger's "Location" tag feature|
This adds a nice "Location" line under my posts that displays the address of my blog post's geotag, and clicking it opens a Google Map of that location.
Until today, I thought that was all you could do with this feature, which seemed a bit disappointing. Ideally, I was hoping there was a way to display, on one single map, the locations of all my blog posts. Sort of like how you can visualize all your Foursquare checkins with its KML feed, I wanted to treat my Blogger blog posts as "Check-ins" and see where all I've been.
It turns out that this is not only possible, but also very easy to do. The technology behind it seems ancient (2008) but I just tested it out (2014) and it works beautifully!
Adding the widget from the original source (easy)
The most simple way is just to follow the directions from this old "Blogger in Draft" post:
- Go to Blogger's "Layout" editing section
- Add a new Gadget
- Add by URL
- Paste this URL in the box:
http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml(See below for alternate URL)
- Save it and edit the gadget, using your blog's feed URL as the source
Alternate URL: Google Code has depreciated and the code is now gone from their host. However, CameronWills has preserved it on GitHub, so you can use his URL:
Adding the widget from your own source (optional)
The widget source-code is coming from a very old "Blogger in Draft" post, and you might worry that it could be deleted or lost, especially since this seems to be the only location on the net for it. I'll repost it here, so that you could potentially self-host the file if need-be.
In that case:
- Copy the code from the box below and save it in a plain text document, giving it the extension .xml
- Upload the document to a place that allows public full access to the document. Don't paste it into a blog post. It has to be accessible as text. Google Sites sometimes works, as can your Dropbox Public folder, or any other file hosting site that lets you link directly to the file.
Google Drive can also do this.
- Use this new URL, the location of the file you just uploaded, as the URL when you add the widget via the "Adding by URL" option.
You may also be able to insert this code into the widget itself, though you'll need to extract just the [CDATA[ portion. To see what I mean, see here and here.
Blog Map widget in action
Here is a screenshot of this beautiful, underutilized, and probably forgotten feature. The map that is now displayed in your blog's sidebar shows pins at your posts' geotagged locations. You can click the pins for a small pop-up dialog that contains a link to the blog post that was tagged at that location.
|Blog Map sidebar widget|
Embedding the map in a Blogger Page
You don't have to just use this as a side-bar widget. The map can also be embedded on one of your Blogger pages (it works better on a "page" not a "post").
This is very easy. Just create a new Blogger page, switch to HTML editing, and paste this code, changing the URL for your blog:
<iframe frameborder="0" height="250" id="map" name="map" src="//www-blogger-opensocial.googleusercontent.com/gadgets/ifr?url=http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml&container=blogger&view=default&lang=en&country=ALL&sanitize=0&v=38841e006da8e2dd&libs=core:dynamic-height:setprefs&parent=http://YOURBLOG.blogspot.com/&up_feedUrl=http://YOURBLOG.blogspot.com/feeds/posts/default&up_height=250&mid=1#up_height=250&up_feedUrl=http://YOURBLOG.blogspot.com/feeds/posts/default&st=e%3DAFlCd0Vr5Ehr8RmECOHLq0S%252F20Y33QUXiflbjKfRMJKtj9KwkD9YS3Uq3Xezr3ffRqOsHwYznsMMLJL1lzdH2mGi20gGUDm6kZZjf5a%252F1QQDC%252B%252B6NPHmoRqokx%252BjvN6pekTyBhptzGC9%26c%3Dblogger&rpctoken=2160341050058157284" style="display: block; width: 100%;"></iframe>
It does not seem to work if your blog's feed is redirected through Feedburner, and the script can sometimes hang if you have too many entries. You may also find that you need to replace your blog's username-based URL with its numerical ID equivalent (http://www.blogger.com/feeds/BLOGIDNUMBER/posts/default?max-results=500)
If you use Blogger, please add the widget to your Blogger blog, and demonstrate its usefulness to the masses! I'd love for this wonderful bit of code to be revived, and for Google to be more active in supporting Blogger. In the crazy world of Google+ checkins and Swarm checkins and Facebook checkins and all the other checkin services, it's nice to see location-tags on Blogger still being supported. It's a great way to revisit old memories and see your blog journey in a new way.