Display data on Google Maps with Geo RSS

Display data layer on Google maps with GeoRssGoogle map API is a great tool for displaying maps on your wesbite or blog.

Displaying a single point on the map is pretty straightforward, but if you want to display many points, you need to start working with layers.

In this post you’ll learn to add many points to your map with a GeoRSS layer.

Why use GeoRSS

There are many advantages by using GeoRSS.

  • GeoRSS is a standard, which means that you can be lucky, that somebody already created a file with the data that you want to display on your map.
  • If you have GeoRSS content, you can easily syndicate it to other sites (if it fits into your site strategy)
  • Both Google Maps, Bing Maps and Cloudmade maps supports GeoRSS

A GeoRSS file has the following format:

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
 <channel>
 <title>Reported Road Hazards</title>
 <link/>
 <description>Road hazards reported to the city</description>
 <item>
 <title>Traffic Light</title>
 <description>Traffic light on north west corner out</description>
 <geo:lat>43.64887</geo:lat>
 <geo:long>-79.385362</geo:long>
 </item>
 <item>
 <title>Traffic Signage</title>
 <description>Stop sign missing</description>
 <geo:lat>43.646870</geo:lat>
 <geo:long>-79.383342</geo:long>
 </item>
</channel>
</rss>

Displaying GeoRSS with Google Maps API

Including a GeoRSS file in Google Maps API is pretty straightforward. You simply add the following to the google map definition:

var georssLayer = new google.maps.KmlLayer('<insert link to georss file here>');
georssLayer.setMap(map);

Using GeoRSS to display data on Google Maps API

From there it’s just a matter of embedding the GeoRSS specific definiton in the normal Google Map API code, and then you’re up and running.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer GeoRSS</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#map_canvas{
 width:500px;
 height: 350px;
}
</style>
<script type="text/javascript">
function initialize() {
 var myLatlng = new google.maps.LatLng(49.496675,-102.65625);
 var myOptions = {
 zoom: 4,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }

 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 var georssLayer = new google.maps.KmlLayer('<insert link to georss file here>');
 georssLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
 <div id="map_canvas"></div>
</body>
</html>

See example here

Conclusion

Using GeoRSS is a very easy way of displaying data as layers on top of Google Map API.
GeoRSS is a standard, so it’s widely supported, which means that you can already find a lot of content, and if you create content it’s also easy to syndicate your content to other sites.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

One Reply to Display data on Google Maps with Geo RSS

  1. Sameer says:

    Hello Team,
    I have tried above mentioned example with localhost as my web server for accessing xml file.
    it is not working.
    please help

Comments are now closed for this article.