I’m helping out on a project, GreenerEarth, which is a location companion site to the GreenerMagazine set of environmental weblogs.

For various reasons, they’re using Blogger to currently run their weblogs since it’s free, easy to setup, and easy to use for non-technical people.

The goal of GreenerEarth 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.

The nitty-gritty

The post template looks like this:

The fields should be pretty self-explanatory. The GeoRSS 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:

Sustainable Diamaonds

  Diavik diamond mines are sustainable Mines
   located in the Northwest Territories.
  
homepage
Diavik diamond mine
Lac de Gras
Northwest Territories
Canada


  Some Interesting information
  about Diamond mines

If you have multiple locations, copy the template before the

“;

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

map.addOverlay(marker);

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

}

Finally, the appropriate CSS markup also needs to be placed in the template. Modify it as you want to make it match the rest of your blog.

#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;
     }