borders.js

$(document).ready(function() {
	var gmap = new GMap2(document.getElementById("map"));
	gmap.addControl(new GSmallMapControl());
	var startingPoint = new GLatLng(51.506325,-0.127144);
	gmap.setCenter(startingPoint, 13);
	
	var bounds = new GLatLngBounds();
	
	function displayPolygon(woeid, borderColor, fillColor) {
		$.getJSON('http://api.flickr.com/services/rest/?method=flickr.places.getInfo&api_key=get_your_own&woe_id=' + woeid + '&format=json&jsoncallback=?', function(data) {
		if(data.place.has_shapedata == 1) {
			
			$.each(data.place.shapedata.polylines.polyline, function(index,polyline) {
				thepoints = [];
				$.each(polyline._content.split(/ /), function(pindex, point) {
					lat = parseFloat(point.split(/,/)[0]);
					lng = parseFloat(point.split(/,/)[1]);
					thepoints[pindex] = new GLatLng(lat, lng);
				});
				
				var polyOptions = {geodesic:true};
				var polygon = new GPolygon(thepoints, borderColor, 5, 1, fillColor, 0.5, polyOptions);
				gmap.addOverlay(polygon);
				
				$.each(thepoints, function(pindex, point) {
					bounds.extend(point);
				});
			});
			
			if(!bounds.isEmpty()) {
				gmap.setCenter(bounds.getCenter(), gmap.getBoundsZoomLevel(bounds));
			}
		}
		});
	}
	
	displayPolygon(38629, "green", "lightgreen") // upper clapton
	displayPolygon(43295, "red", "pink"); // lower clapton
	displayPolygon(20089379, "blue", "lightblue"); // homerton
	displayPolygon(20094311, "orange", "yellow") // clapton
	displayPolygon(20089378, "purple", "purple")
	
});