Sunday, June 28, 2015

Display all your Blogger posts on a single Google Map

In this post, we'll make a full-size Google Map that contains all the location-tagged posts from your Blogger feed. It will display full entries on the map.

If you're looking for a more simple map page that links to the posts, or for putting a map in your blog's sidebar as a widget, please see my other post.

I keep a travel blog for friends and family, and usually tag those Blogger posts with my location. Usually, this just adds a location tag to the bottom of the post, with a link you can click to see that spot on a map. Pretty boring. But here's a nice way to plot all your geocoded (location-tagged) Blogspot blog posts onto a single Google Map. Great way to revisit old posts and visually, geographically see where and when you were.

For example, here is the map (edit: this example not working; see Step 2 below) with location-tagged posts from this blog. Just click each one to view the corresponding entry in its entirety. All of the entries appear similarly.

Screenshot of my Blog Map
This entry, coincidentally, will be location-tagged in Busan; not because I'm there, but because a man can dream. Anyway, let's get started.

Step 1 - Edit the code

Copy the code below and paste it into a plain-text document.

<!DOCTYPE html>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>GeoRSS Layers</title>
      html, body, #map-canvas {
        height: 100%;
        margin: 0;
        padding: 0;
    <script src=""></script>
function initialize() {
  var myLatlng = new google.maps.LatLng(49.496675,-102.65625);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var georssLayer = new google.maps.KmlLayer({
    url: ''
google.maps.event.addDomListener(window, 'load', initialize);
    <div id="map-canvas"></div>
The bold URL above needs to be replaced with whatever GeoRSS enabed feed you want to use.

Luckily, Blogger blogs already have this feature enabled. Thanks, Google. So if you're using Blogger, you'll just need your blogId number. You can get this by simply logging into Blogger and visiting your blog's posts lists. Look up in the URL and you'll see something like "blogID=48574832938473847". Copy this number and replace "blogId" in the code above with this number.

Save it as an HTML file.

Next, you need to replace blogId in that URL with your own Blogger blog ID number.

Step 2 - Upload the File

Now you need a host for this HTML file. Sadly, I don't think you can just paste this code into a Blogger entry page. Maybe you could edit the template but I'm not a coding genius here.

The important thing is that the file must be accessible directly, so upload it to your own webserver, or your Dropbox public folder, or even to Google Drive. After you've uploaded the file to Google Drive, get it's "shareable link". But we're not done just yet. That shareable link will only open the file in the Google Drive viewer; not open the file directly. To do that, we need to edit the URL a bit. Copy just the number from your shared URL, and tack it on to the end of this string:
That should be it! You've now got a direct link to your map file.

Edit Aug. 2016: Google Drive has shut down their direct-hosting feature, and Dropbox no longer allows it for free accounts. Currently, a recommended solution is GitHub Pages, or any other directly-accessible web host.

Now you could just, for example, have a link on your blog, perhaps as a "Page" on your blog, that leads to that URL, as that is now your Blog Entries Map. But you might also want to embed the map on a page on your blog. In that case:

Step 3 - Embed (optional)

Just create a new Blogger page, switch to HTML editing, and paste this code, changing the URL to your file's location:

<iframe height="400px" width="100%" frameBorder="0" scrolling="no"

With Google+ all but dead, I hope Google gives some more love to Blogger. It's a bit bothersome to have to depend on these workarounds. I admire Naver Blogs for staying updated. It's very easy to add a post map there. It's too bad Blogger doesn't include this type of feature natively. It's a useful tool.

No comments :

Post a Comment