Further to my previous post about displaying your location details using the TwitterVision API, here’s how to extend that to display your Twitter location on a Google Map.

You’ll need to get a Google Map API key first by going here. The steps from there are pretty similar to the non-map version.

1. Add the code for your API key into the <head> of your page.

2. Add a div to your page where you want the location info to go, make it’s id your Twitter screen name like:

<div id="scottmliddell" style="width:200px;height:200px"></div>

You can size this to be the size of map you’d like.

2. You need a simple bit of code to extract the information and set up your map location:

function loc(locObj)
var longitude = locObj.location.longitude;
var latitude = locObj.location.latitude;
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(locObj.screen_name));
map.setCenter(new GLatLng(latitude, longitude), 13);

You can download this as a file here.

3. At the bottom of the HTML page you want to add the location to, add:

<script language="javascript" src="/gloc.js" type="text/javascript"></script>

Obviously replace my Twitter screen name with yours.

You can see this implemented here.