Adding a MapCloud GeoRSS Feed to a Google Map

This tutorial was inspired by the Google Maps Javascript API V3 documentation and the GeoRSS tutorial on the GeoServer website. The following steps will show you how to add  MapCloud’s “Museums” GeoRSS service to a Google Map.

  • Create an HTML file called HelloMapCloud.html
  • Copy and paste the following code into HelloMapCloud.html

——————————————————————————-

<!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>
<link href=”http://code.google.com/apis/maps/documentation/javascript/examples/default.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type=”text/javascript”>
function initialize() {
var myLatlng = new google.maps.LatLng(40.7114,-73.8784);
var myOptions = {
zoom: 11,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
var georssLayer = new
google.maps.KmlLayer(‘PASTE MAPCLOUD URL HERE‘);
georssLayer.setMap(map);
}
</script>
</head>
<body onload=”initialize()”>
<div id=”map_canvas”></div>
</body>
</html>

——————————————————————————–

The resulting map should look similar to the image below.

GeoRSS

GeoRSS Map

Leave a Note