How to Display Your Twitter Location using Google Maps on a Website or Blog
Dec 14
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><scriptsrc="http://twittervision.com/user/current_status/scottmliddell.json?callback=loc"></script>
Obviously replace my Twitter screen name with yours.
You can see this implemented here.
