Display all your Blogger posts on a single Google Map

Here is how to make a full-size Google Map that contains all the location-tagged posts from your Blogger feed. It will display those blog entries on the map when you click the corresponding map pin. This is a great feature for travel blogs, location review blogs, small businesses promoting locations or services performed, etc.

This post has been updated September 2019 to reflect changes to Google's Maps API.

Screenshot of my Blog Map



Background


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 with this code, you can make a nice embeddable that collects them all in an easy-to-navigate display.

Update: Maps requiring API key


In an old version of this post, you didn't need a Google Maps API key to generate the map for your site, provided you included the signed_in=true argument when calling the JS. It seems Google Maps now requires the inclusion of your own API key for this to work. You can sign up for the key here:
Get an API Key  |  Maps JavaScript API  |  Google Developers

Map generation code


Here is a copy of Google's current recommended code for generation a GeoRSS map from your blog feed. From GeoRSS Layers  |  Maps JavaScript API  |  Google Developers. Copy the below code and paste it to a text editor.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>GeoRSS Layers</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: 49.496675, lng: -102.65625}
        });

        var georssLayer = new google.maps.KmlLayer({
          url: 'http://www.blogger.com/feeds/YOURBLOGIDHERE/posts/default?max=500&max-results=500&format=feed-georss'
        });
        georssLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Update: I did make one small change there (adding the feed-georss argument) thanks to a friendly commentator who got the map working well on her blog.


Now then, you will need to replace the two bold items:
  1. YOURBLOGIDHERE.
    This is your Blogger blog ID number. You can find this by visiting your Blogger editor at https://www.blogger.com/blogger.g and copying the number in the address bar "blogID." For example, you should see something like blogID=4168242168532572349. That number is your Blog ID and should replace the first bold part int the code above.
  2. YOUR_API_KEY.
    This is the long key you will have to get from Google. It looks something like AIzaSyDIJ9XX2ZvRKCJcFRrl-lRanEtFUow4piM

Save the code in a text file as an HTML file.

Host the file


You next to find a place to host the file.

Google Drive used to allow this but 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.

(Technically you could probably rewrite the code to be pastable directly into a Blogger page, but with my limited knowledge of Javascript I wasn't able to get it right).

With the file publically hosted, you can for example have a link on your blog to the map. But you probably would rather embed it in the blog, probably as a "Page" on your blog. In that case...

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"
        src="http://www.yourhost.com/yourfile.html">
    </iframe>

It would be great if somebody smarter than me could remove the step of having to have the page file hosted. It's bothersome to have to depend on this workaround. I admire Naver Blogs for staying updated and providing this type of map as an official widget. It's very easy to see your map of posts there. It's too bad Blogger doesn't include this type of feature natively. It's a useful tool.

Example


Here is Blogger's official example of this kind of map. They're using a Flickr source but it will appear the same for Blogger.



Older code example (no longer working)


For reference, this was the older map generation code from the older version of this blog post which has been depreciated.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>GeoRSS Layers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <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: 'http://www.blogger.com/feeds/blogId/posts/default?max=500&max-results=500'

  });
  georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>


Final thoughts


Note that any GeoRSS enabled feed can be substituted for the Blogger feed in the code. So this ought to work with Flickr, WordPress, or other services that include GeoRSS information in their feeds.

If you get it working, you'll notice that clicking the map pins displays that corresponding blog post in a pop-up right there on the map. If the post is short, this is fine, but for larger posts this may not be ideal. As it grabs the posts from the blog feed, you can edit this behavior by either limiting your blog's feed to "Short" or else replace "default" with "summary" in the Blogger URL like so:

http://www.blogger.com/feeds/YOURBLOGIDHERE/posts/summary?max=500&max-results=500&format=feed-georss

And 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.



Comments

Ben On Track said…
It doesn't work : Error parsing XML : The reference to entity "signed_in" must end with the ';' delimiter.
Any idea to fix it ?
Sam Nordberg said…
I think the problem is that since I originally posted this, Google has really cracked down on their Maps API use. I used to be enough to use the "signed_in" argument to load the map via that user but it looks like you now need to specify your own API key. For a small blog that won't be calling the service frequently I think it's still free. But anyway you will have to register for the key yourself and include it in the code. The code itself looks updated now so I'll edit this post to include the new code. Thanks for bringing this to my attention.
Zeinobia said…
It worked half way :) It showed the map but it did not show the posts. Is it because my posts are more than 500 ? Already I do not have too many Geotagged posts , in fact they can be less than 500 ? Here is where my I posted it. https://egyptianchronicles.blogspot.com/p/world-chronicles.html
Zeinobia said…
Hello again :)
Thanks again , I made it work at last and showed my posts on the map like a charm :)) It turned out that I should add "format=feed-georss" in the end of the Blogger Feed url so it will be like that http://www.blogger.com/feeds/YOURBLOGIDHERE/posts/summary?format=feed-georss like the example of flickr.

Thank again for your great help , I could not do it except checking your website :))
Sam Nordberg said…
Excellent. I will edit the post to include your discovery. Thank you for sharing this information. Your map looks great.