Hurray, I can now add Google Maps right into my Blogger posts ^_^

I have lots of ideas for making simple applications using hacks like this (e.g. combining geotagged information from del.icio.us with Google Maps) so expect to see more os this stuff in the near future.

What you see in the map bellow are links from my del.icio.us account, marked with the "geotagged", "geo:lat=x" and "geo:long=y" tags.


<[[CDATA[ function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); } ); return marker; } var map = new GMap2(document.getElementById("map1")); map.addControl(new GLargeMapControl()); map.setCenter(new GLatLng(38.4519, -9.0929),3); for (var i=0; i != Delicious.posts.length; i++) { var lat=0; var lon=0; var post = Delicious.posts[i]; for (var j=0; j != post.t.length; j++) { tag = new String(post.t[j]); if (tag.substring(0,tag.indexOf('='))=='geo:lat') lat = tag.substring(tag.indexOf('=')+1); if (tag.substring(0,tag.indexOf('='))=='geo:long') lon = tag.substring(tag.indexOf('=')+1); }; var marker = createMarker(new GLatLng(lat,lon),""+post.d+"
"+post.n); map.addOverlay(marker); }; ]]>
Ok, this is just a proof of concept example, nothing too fancy... but things start to get interesting when you have more geotagged information (e.g. restaurants in a given city, local businesses or other points of interest), when you use different markers for distinguishing different types of things in the map, when you get information from multiple services (e.g. geotagged photos from flickr or geotagged events from Google calendar), when you combine maps with a geocodder for street addresses (and yes, I developed one such tool for Portuguese addresses in the context of my PhD work). It's incredibly simple to do this sort of mashups, and I do have lots of ideas ^_^

For other hackers out there, here's the recipe for doing something like this (and yes, this is just dumb JavaScript coding and there's lots of more interesting ways for doing something like this). If you're using Blogger you also have to consider the fact that you can't normally use of JavaScript code inside blog posts. However, a workaround is to use DOM scripting techniques and the eval() function for placing the code inside another tag. I'll detail this in another post, but for now here's the general code for the maps.

<script type="text/javascript"
        src="http://del.icio.us/feeds/json/begmartins/geotagged?count=50">
</script>
<script type="text/javascript"
        src="http://maps.google.com/maps?file=api&v=2&key=YOURKEY">
</script>
<div id="map" style="width: 460px; height: 320px;"></div>
<script type="text/javascript">
function createMarker(point,html) {
 var marker = new GMarker(point);
 GEvent.addListener(marker, "click", function() { 
  marker.openInfoWindowHtml(html);
 } );
 return marker;
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(38.4519, -9.0929),3); // center map in Lisbon
for (var i=0; i!=Delicious.posts.length;i++) { 
 var lat=0; 
 var lon=0; 
 var post=Delicious.posts[i];
 for (var j=0;j!=post.t.length;j++) {
  tag = new String(post.t[j]);
  if (tag.substring(0,tag.indexOf('='))=='geo:lat') 
   lat = tag.substring(tag.indexOf('=')+1);
  if (tag.substring(0,tag.indexOf('='))=='geo:long') 
   lon = tag.substring(tag.indexOf('=')+1);
 };
 var marker = createMarker(
  new GLatLng(lat,lon),
  "<a href="+post.u+">"+post.d+"</a><br/>"+post.n
 ); 
 map.addOverlay(marker);
 };
</script>