1) Create a new post
2) You will get a blank template:

  <div class="location" lat="" long="">
  <div class="summary"></div>
  <div class="detail">

  </div>
  <div class="link"><a href="http://"></a></div>
  <div class="geo_name"></div>
  <div class="geo_city"></div>
  <div class="geo_region"></div>
  <div class="geo_country"></div>
  </div>

  <div id="article"> 

  </div>

3) You should fill out the template with the information for the location you wish to present. For example, the Diavik Diamond Mines would look like:

  <div class="location" lat="64.30" long="-110.17">
  <div class="summary">Sustainable Diamaonds</div>
  <div class="detail">
  Diavik diamond mines are sustainable Mines....
  </div>
  <div class="link"><a href="http://
  Diavik diamond mine">homepage</a></div>
  <div class="geo_name">Diavik diamond mine</div>
  <div class="geo_city">Lac de Gras</div>
  <div class="geo_region">Northwest Territories</div>
  <div class="geo_country">Canada</div>
  </div>

  <div id="article"> 
    Interesting information on Diamond Mines
  </div>

4) If you have multiple locations, copy the template before the <div id="article"> and paste it below the previous location (or in the desired order). You can add as many locations as you want. They will show up as locations with connecting lines on the map. 

5) Click "Publish Post" and you're done!

<a href='http://highearthorbit.com/wp-images/Greenermaps2.JPG' alt='GreenerMaps screenshot' target="_blank"><img src='http://highearthorbit.com/wp-images/thumb-Greenermaps2.JPG' alt='GreenerMaps screenshot' align="right" hspace="10px"/></a>I'm helping out on a project, <a href='http://greenerearth.blogspot.com/'>GreenerEarth</a>, which is a location companion site to the <a href='http://greenermagazine.blogspot.com/'>GreenerMagazine</a> set of environmental weblogs. 

For various reasons, they're using <a href='http://blogger.com'>Blogger</a> to currently run their weblogs since it's free, easy to setup, and easy to use for non-technical people. 

The goal of <a href='http://greenerearth.blogspot.com/'>GreenerEarth</a> was to create a companion weblog that provided maps and locations to the various articles that will appear on GreenerEarth. The difficulty resides in the severe restrictions using an hosted blogging tool places on creating a dynamically generated maps. I wanted to allow the writers to easiliy create new posts, put in locations, and then just 'post'. The actual page would handle parsing the post for the location data and then creating the resulting map.

The only access you have in Blogger (at least) is the main template page, and post templates. Therefore, the solution calls for a marked-up post with lots of tags, and heavy Javascripting of the DOM to dynamically create an array of locations and put these on a GoogleMap.

The result is the ability for any blog author to write a post using the template and the resulting post to have a map with the multiple (or single) locations and article body. As the user clicks on locations in the map, the detailed description shows itself and a bubble shows the summary and link to the site's homepage. 

<h2>The nitty-gritty</h2>
The post template looks like this:
<pre><code>
  <div class="location" lat="" long="">
  <div class="summary"></div>
  <div class="detail">

  </div>
  <div class="link"><a href="http://"></a></div>
  <div class="geo_name"></div>
  <div class="geo_city"></div>
  <div class="geo_region"></div>
  <div class="geo_country"></div>
  </div>

<div id="article"> </div>
</code></pre>

The fields should be pretty self-explanatory. The <a href='http://georss.org'>GeoRSS</a> microformat is still being standardized, and hasn't yet been defined for marking up XHTML content. So I made an ad-hoc solution. A filled out post would then look like so:
<pre><code>
  <div class="location" lat="64.30" long="-110.17">
  <div class="summary">Sustainable Diamaonds</div>
  <div class="detail">
  Diavik diamond mines are sustainable Mines located in the Northwest Territories. 
  </div>
  <div class="link"><a href="http://
  Diavik diamond mine">homepage</a></div>
  <div class="geo_name">Diavik diamond mine</div>
  <div class="geo_city">Lac de Gras</div>
  <div class="geo_region">Northwest Territories</div>
  <div class="geo_country">Canada</div>
  </div>

<div id="article">Some Interesting information about Diamond mines</div>
</code></pre>

If you have multiple locations, copy the template before the <div id="article"> and paste it below the previous location (or in the desired order). You can add as many locations as you want. Each location will show up as locations with connecting lines on the map. 


The Code
------------

<html>
<head>
<style type="text/css">
#map {
    float: left;
    text-color: black;
    font-size: 12px;
    }
#map .mapMarker{
  color: black;
  width: 250px;
}

#map .mapMarkerMore {
  text-align:right;
}
.location {
    font-size: 12px;
    border: 1px solid white;
    background-color: gray;
    padding-left: 5px;
    }
.location .summary {
    color: white;
    font-size: 16px;
    border-bottom: 1px solid white;
    background-color: #9ad;
    margin-left: -5px;
    padding-left: 5px;
    display:block;
    }
.location .detail {
	display: inline;
    }
.geo_name {
    font-size: 11px;
    border-bottom: 1px;
    }

.geo_city, .geo_region, .geo_country {
    display: inline;
    margin-top: 4px;
    padding-right: 3px;
    font-size: 9px;
    border-top: 1px solid white;
    text-align: right;
    }

.greenNav {
	display: inline;
	list-style-type: none;
	padding-right: 5px;
	margin: 0px;
    }
.greenNav li {
	display: inline;
	list-style-type: none;
	border-right: 1px solid gray;
	padding-right: 5px;
    }
.hidden {
    display: none;
     }
</style>
</head>
<body>
<div id="map" style="width: 450px; height: 450px"></div>

<script type="text/javascript">
//< ![CDATA[
//
// Returns an array of elements with the given class
//
function getElementsByClass(elem, classname) {
    var classes = new Array();
    var alltags = document.getElementsByTagName(elem);
    var pattern = new RegExp("(^|\\s)"+classname+"(\\s|$)");
    for (i=0; i<alltags.length; i++)
    {
       if (pattern.test(alltags[i].className))
            classes[classes.length] = alltags[i];
    }
    return classes;
}
function createMarker(point, index, html, element) {
  // Create a lettered icon for this point using our icon class from above
  var letter = String.fromCharCode("A".charCodeAt(0) + index);
  var icon = new GIcon(baseIcon);
  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
  var marker = new GMarker(point, icon);

  // Show this marker's index in the info window when it is clicked
  GEvent.addListener(marker, "click", function() {
	hideLocations();
    marker.openInfoWindowHtml(html);
    element.className = "location";
  });

  return marker;
}
  
function hideLocations()
{
    var mapLocation = getElementsByClass("div","location");
     
    for(var i = 0; i < mapLocation.length; i++)
    {
        mapLocation[i].className =  "location hidden";
    }
}

function placeArticle()
{
  var article = document.getElementById("article");
  var postbody = document.getElementById("post-body");
  if(postbody != null)
      postbody.appendChild(article);

}
if(GBrowserIsCompatible())
{
     placeArticle();

       // Create a base icon for all of our markers that specifies the shadow, icon
       // dimensions, etc.
       var baseIcon = new GIcon();
       baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
       baseIcon.iconSize = new GSize(20, 34);
       baseIcon.shadowSize = new GSize(37, 34);
       baseIcon.iconAnchor = new GPoint(9, 34);
       baseIcon.infoWindowAnchor = new GPoint(9, 2);
       baseIcon.infoShadowAnchor = new GPoint(18, 25);

       var map = new GMap(document.getElementById("map"));
       map.addControl(new GLargeMapControl());
       map.addControl(new GMapTypeControl());
       map.centerAndZoom(new GPoint(0,0), 4);
       var mapLocation = getElementsByClass("div","location");
       var locationPoints = [];
       for(var i = 0; i < mapLocation.length; i++)
       {
            var locDiv = mapLocation[i].childNodes;
            mapLocation[i].className = "location hidden";
            
            var loc_lat = mapLocation[i].getAttribute("lat");
            var loc_lon = mapLocation[i].getAttribute("long");
            for(var j = 0; j < locDiv.length; j++)
            {
                if((locDiv[j] != null))
                {                   
		            var locClass = locDiv[j].className;
                    if(locClass  == "geo_name")
                    {
                        var loc_name = locDiv[j];
                    }
                    if(locClass == "geo_city")
                    
                       var loc_city = locDiv[j];
                    if(locClass == "geo_region")
                       var loc_region = locDiv[j];
                    if(locClass == "geo_country")
                       var loc_country = locDiv[j];
            
                    if(locClass == "summary")
                    {
                       var loc_summary = locDiv[j];
                    }
                    if(locClass == "link")
                       var loc_link = locDiv[j];            
                }
                if((locDiv[j].nodeName == "BR") || (locDiv[j].nodeName == "br"))
                    locDiv[j].style.display = "none";
            }
            locationPoints.push(new GPoint(parseFloat(loc_lon),parseFloat(loc_lat)));
        
            var html = "<div class='mapMarker'><a href='" + loc_link.innerHTML + "'>" + 

loc_name.innerHTML + "</a><p class='mapMarkerDescription'>" + loc_summary.innerHTML + "</p><a href='" + loc_link.innerHTML + "'>info</a></script></code></pre></div>";

            var marker = createMarker(locationPoints[locationPoints.length-1], i, html, 

mapLocation[i]);

          
            map.addOverlay(marker);

       }
       map.addOverlay(new GPolyline(locationPoints));
       map.centerAndZoom(locationPoints[0], 4);

}
 
//]]>
</script>  
</body>
</html>