« Home | links for 2006-04-16 10 Pictures of Tokyo Gotham... » | O boom da dot-com, versão 2.0 » | A Scanner Darkly » | Fear of Girls » | MirrorMask e Drawing Restraint 9 @ IndieLisboa 200... » | The Fountain » | links for 2006-04-14 A/Prof N J Wildberger Perso... » | C For Cookie » | links for 2006-04-13 The Edge Case: A Novel Wha... » | links for 2006-04-12 CSS Remix: CSS-Based Websit... » 

Tuesday, April 18, 2006 

Google Maps in Blogger Posts

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>

aha!
today we can already see something.

Post a Comment

Links to this post

Create a Link

About me

www.flickr.com
This is a Flickr badge showing public photos from Bruno Martins. Make your own badge here.

Listening to


 All the Web
Me at BookCrossing
Campos Magneticos

Previous posts

Friendly Blogs

Powered by Blogger, Flickr
and del.icio.us