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.
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.
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
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.
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:
Save the code in a text file as an HTML 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...
Just create a new Blogger page, switch to HTML editing, and paste this code, changing the URL to your file's location:
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.
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.
For reference, this was the older map generation code from the older version of this blog post which has been depreciated.
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:
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.
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:
- 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. - 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-georssAnd 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
Any idea to fix it ?
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 :))