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.
Hello Team,
I have tried above mentioned example with localhost as my web server for accessing xml file.
it is not working.
please help