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>
<script
src="https://twittervision.com/user/current_status/scottmliddell.json?callback=loc">
</script>
Obviously replace my Twitter screen name with yours.
You can see this implemented here.
