Fauntleroy/markup.html

## markup.html
<!DOCTYPE html>
<html>
	<head>
		<title>Boku in Heat</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	    <meta charset="utf-8">
	    <title>Fusion Tables styling</title>
	    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu0KqDrN-FYvzwTCzec_EakWQlcPeoPC8&sensor=false"></script>
	</head>
	<body>
		<div id="map-canvas"></div>
	</body>
</html>

## script.js
var map, layer;
var countries = ['RS', 'AL', 'DZ', 'AO', 'AG', 'AR', 'AM', 'AU'];
var transactions = [];

function randomPolyOpts(){
	return {
		fillColor: '#' + Math.floor(Math.random()*16777216).toString(16),
		fillOpacity:  Math.random()
	}
}

function goWild(){
	var style = [{polygonOptions: { fillColor: '#333333', fillOpacity: 0.2}}];
	for (var i = countries.length - 1; i >= 0; i--) {
		style.push({polygonOptions: randomPolyOpts(), where: "'ISO 2 Letter Code' = '" + countries[i] + "'"});
	};
	layer.styles = style;
	layer.setMap(map);
	console.log('wildly wild');
}

function dropPoint(){
	transactions.push(new google.maps.Marker ({
		position: new google.maps.LatLng(Math.random()*360-180, Math.random()*360-180),
		map: map,
		title: "TRANSACTION"
	}));
}

function initialize() {

  //var australia = new google.maps.LatLng(-25, 133);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
  	center: new google.maps.LatLng(0, 0),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'Geometry',
      from: '1-05stFIyjdScUWHcaVr7u6JVDh3SamBIA4rMguc'
    },
    styles: [{
  	polygonOptions: {
  		fillColor: '#333333',
  		fillOpacity: 0.2
  	}
  }, {
  	where: "'ISO 2 Letter Code' = 'US'",
  	polygonOptions: {
  		fillColor: '#008888',
  		fillOpacity: 0.5
  	}
  }, {
  	where: "'ISO 2 Letter Code' = 'GB'",
  	polygonOptions: {
  		fillColor: '#00FF00',
  		fillOpacity: 0.5
  	}
  }, {
  	where: "'ISO 2 Letter Code' = 'RU'",
  	polygonOptions: {
  		fillColor: '#FF0000',
  		fillOpacity: 0.5
  	}
  }]
  });
  layer.setMap(map);

	window.setInterval(goWild, 3000);
	window.setInterval(dropPoint, 2400);
}

google.maps.event.addDomListener(window, 'load', initialize);

## style.css
html { height: 100% }
body { height: 100%;}
#map-canvas { height: 800px; width: 100%; padding-right: -100px }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Boku in Heat</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Fusion Tables styling</title>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu0KqDrN-FYvzwTCzec_EakWQlcPeoPC8&sensor=false"></script>
	</head>
	<body>
	<div id="map-canvas"></div>
	</body>
	</html>
	var map, layer;
	var countries = ['RS', 'AL', 'DZ', 'AO', 'AG', 'AR', 'AM', 'AU'];
	var transactions = [];

	function randomPolyOpts(){
	return {
	fillColor: '#' + Math.floor(Math.random()*16777216).toString(16),
	fillOpacity: Math.random()
	}
	}

	function goWild(){
	var style = [{polygonOptions: { fillColor: '#333333', fillOpacity: 0.2}}];
	for (var i = countries.length - 1; i >= 0; i--) {
	style.push({polygonOptions: randomPolyOpts(), where: "'ISO 2 Letter Code' = '" + countries[i] + "'"});
	};
	layer.styles = style;
	layer.setMap(map);
	console.log('wildly wild');
	}

	function dropPoint(){
	transactions.push(new google.maps.Marker ({
	position: new google.maps.LatLng(Math.random()360-180, Math.random()360-180),
	map: map,
	title: "TRANSACTION"
	}));
	}

	function initialize() {

	//var australia = new google.maps.LatLng(-25, 133);

	map = new google.maps.Map(document.getElementById('map-canvas'), {
	center: new google.maps.LatLng(0, 0),
	zoom: 2,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	layer = new google.maps.FusionTablesLayer({
	query: {
	select: 'Geometry',
	from: '1-05stFIyjdScUWHcaVr7u6JVDh3SamBIA4rMguc'
	},
	styles: [{
	polygonOptions: {
	fillColor: '#333333',
	fillOpacity: 0.2
	}
	}, {
	where: "'ISO 2 Letter Code' = 'US'",
	polygonOptions: {
	fillColor: '#008888',
	fillOpacity: 0.5
	}
	}, {
	where: "'ISO 2 Letter Code' = 'GB'",
	polygonOptions: {
	fillColor: '#00FF00',
	fillOpacity: 0.5
	}
	}, {
	where: "'ISO 2 Letter Code' = 'RU'",
	polygonOptions: {
	fillColor: '#FF0000',
	fillOpacity: 0.5
	}
	}]
	});
	layer.setMap(map);

	window.setInterval(goWild, 3000);
	window.setInterval(dropPoint, 2400);
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	html { height: 100% }
	body { height: 100%;}
	#map-canvas { height: 800px; width: 100%; padding-right: -100px }