Display data on Google Maps with Geo RSS
jhnidk - September 8th, 2010 in: Mapping
Google 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);
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>
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.
Recommended further reading:
 |
Beginning Google Maps Mashups with Mapplets, KML, and GeoRSS: From Novice to Professional (Expert’s Voice in Web Development)
Google, maps, and mashups, three hot technologies brought together in one beginning level learning guide. Written by the professional for the professional, Beginning Google Maps Mashups with Mapplets, KML and GeoRSS is the first beginning level book that covers Google’s… |
 |
Practical Google Maps Mashups with Google Mapplets, GeoRSS and KML
Have a Google Maps mashup that you’d like to expose to millions of users on maps.google.com? New to the mapping craze, but have an idea for a killer map–based application? Practical Google Maps Mashups with Google Mapplets,… |
 |
Pro Web 2.0 Mashups: Remixing Data and Web Services (Expert’s Voice in Web Development)
Mashups are hugely popular right now, a very important topic within the general area of Web 2.0, involving technologies such as CSS, JavaScript, Ajax, APIs, libraries, and server-side languages (such as PHP and ASP.NET.) This book aims to be the… |
Hello Team,
I have tried above mentioned example with localhost as my web server for accessing xml file.
it is not working.
please help
Sameer (October 30th, 2011)