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.
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
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.
Somewhere in your template you should add the following to actually place your map. You can vary the size as desired here.
the nitty-gritty
To grab the code below in a simple form, download the source code here.
The following Javascript goes at the bottom of the Blogger template. What it does is search through the DOM (the post) and pulls out all of the location elements and then creates an array of the latitude and longitude values of the location. The summary and link are placed within the GoogleMaps popup window and then the rest of the actual location information shows or hides itself in the right-hand sidebar.
“;
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;
}
My name is