Intro:
Anyone who has used Mozilla's Firefox has eventually gotten curious enough to click on the 'Latest Headlines' Really Simple Syndication (RSS) feed. A list of links to current news stories is displayed, and the user can follow the links. The RSS feed updates itself, and there is always a list of fresh news stories.

Many websites publish RSS feeds, allowing users to check the contents of the site, without actually having to go to the site and search for updates. RSS is convenient and helps to propagate information effectively.

Segue to Geographically Encoded Objects for RSS (GeoRSS), an RSS feed for geographical information, that can be used with Geographic Information System (GIS) products that support a GeoRSS input. These feeds can be overlaid on a map that meets the user's needs.

Examples of GeoRSS usage:
1. Locations of properties for sale in a geographic area.
2. Pictures/text overlaid on a map at certain points.
3. Road directions.

In the following tutorial we will use GeoRSS and the Google Maps API. Our example will show a walk down John Steinbeck's Cannery Row.

The tutorial reader will benefit from a basic knowledge of HTML, JavaScript and XML.

1/4 Setup the Google Map:



-->

<!--map.html>
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>


The above code is a copy and paste from the GMap API, and is gone through ad nauseum here. Copying and pasting the code in an html page will give you a blank page with the map. A user can move around by clicking and using the mouse, just like in the normal Google Maps page. There are some controls missing, and we'll get to that in the next map.

Also notice the GMap 'key' listed in the <head> of the html file. When doing testing on a local machine, the provided key is adequate. When you want to use a map on a production web server it will be necessary to register your domain with Google. You will receive a unique key for the maps on your web page.

2/4 Write the GeoRSS:

The GeoRSS file can be created using any text editor: notepad, vi, emacs, etc. Make sure to save it as an '.xml' file.

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
   xmlns:media="http://search.yahoo.com/mrss/"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" 
   xmlns:georss="http://www.georss.org/georss">

   <channel>
      <title>Olympian Engine</title>
      <link>http://www.olympianengine.com</link>

      <item>
       <description>
        <a href="http://www.olympianengine.com/tutorials/
		georss/images/1.JPG" title="Image0">
	 <img src="http://www.olympianengine.com/tutorials/
		georss/images/1.JPG"width="240" height="175"/>
	 </a><br>Beach.
       </description>
       <georss:point>36.610269 -121.896253</georss:point>
      </item>

      ...

      <item>
       <description>
        <a href="http://www.olympianengine.com/tutorials/
		georss/images/9.JPG" title="Image0">
	 <img src="http://www.olympianengine.com/tutorials/
		georss/images/0.JPG"width="240" height="175"/>
	 </a><br>Monterey Canning Company.
       </description>
       <georss:point>36.615875 -121.900106</georss:point>
      </item>
   </channel>
</rss>


FULL CODE. MAKE SURE WHEN COPYING AND PASTING TO RIGHT-CLICK 'VIEW SOURCE' and to copy the code from there. Simply copying and pasting what is in the HTML browser will NOT work.

We can see xml version tags, some namespace attributes, and then the GeoRSS channel. Each <item> is going to be a unique marker on the map. Create an <item> for each picture at each location. Google Earth is very useful for finding the latitude and longitude of where you took your pictures. If you use that method, you will have to convert Degrees/Minutes/Seconds to Decimal for each point. This website provides that functionality.

3/4 Customize the Google Map:

1. Make the map bigger in the website.

<div id="map" style="width: 640px; height: 480px"></div>


2. Focus on the middle of our 'interest area'. Zoom in.

map.setCenter(new GLatLng(36.613697, -121.898206), 16); 

The lat/lon go into the GLatLng, and the number '16' is the zoom value, the higher the number, the closer in the zoom.

3. Add map controls.

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl()); 

The first control is for panning/zooming the map, the second control is for the layer selector (map/satellite/hybrid).

4. Select the initial layer.

map.setMapType(G_HYBRID_MAP);

The above line will initially select the hybrid layer. 'G_NORMAL_MAP' and 'G_SATELLITE_MAP', sans quotes, will set the map to the two other Google Map options.

5. Add the GeoRSS overlay.

var geoXml = new GGeoXml("http://www.samueltoepke.com/projects/olympianengine/
public/tutorials/georss/georss22.xml");
...
map.addOverlay(geoXml);

4/4 Final Product:



-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
        <script src="http://maps.google.com/maps?file=api&v=2.x&
		key=ABQIAAAA-NJD0XqB0IhN9yuKiojiBxSvSD7zU4OS_
ubEDyqgvQhwdg8PKhS1sJJ44Ez9hGQnZTVgjilNfYDhoQ" 
		type="text/javascript"></script>
        <style type="text/css">
            v\:* {
            behavior:url(#default#VML);
            }
        </style>
        <script type="text/javascript"> 
            var map;
            var geoXml = new GGeoXml("http://www.samueltoepke.com/projects/olympianengine/
		public/tutorials/georss/georss22.xml");
            var toggleState = 1;
            function onLoad() {
                if (GBrowserIsCompatible()) {
                    map = new GMap2(document.getElementById("map")); 
                    map.setCenter(new GLatLng(36.613697, -121.898206), 16); 
                    map.addControl(new GLargeMapControl());
                    map.addControl(new GMapTypeControl());
                    map.addOverlay(geoXml);
                    map.setMapType(G_HYBRID_MAP);
                }
            } 
        </script>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>GeoRSS Tutorial</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
    </head> 
    <body onload="onLoad()">    
        <div id="map" style="width: 640px; height: 480px"></div> 
    </body>
</html>


We now have a customized, moveable, Google Map that we can post on a website.