how to create density map using googlemaps api - google-maps

Question

I want to create a density map similar to the link below
http://www.guardian.co.uk/news/datablog/interactive/2011/jun/22/us-casualties-afghanistan-state
Can anyone please steps tell how such type of maps can be created.
thank you

Answer 1

They're using a FusionTablesLayer to do this.
Their maps-related JS in full from that page:
var center = new google.maps.LatLng(38.0000,-97.0000);
var zoom = 4;
var legend_width = '150px';
var tableid = 1038573;
var location_column = 'geo';
var columns = {
'Killed in action': [
{
'min': 0,
'max': 10,
'color': '#f4cccc'
},
{
'min': 10,
'max': 30,
'color': '#ea9999'
},
{
'min': 30,
'max': 60,
'color': '#cc0000'
},
{
'min': 60,
'max': 90,
'color': '#990000'
},
{
'min': 90,
'max': 130,
'color': '#660000'
}
],
'Killed, not in action': [
{
'min': 1,
'max': 10,
'color': '#f4cccc'
},
{
'min': 10,
'max': 20,
'color': '#ea9999'
},
{
'min': 20,
'max': 30,
'color': '#cc0000'
}
],
'Wounded in action': [
{
'min': 0,
'max': 100,
'color': '#f4cccc'
},
{
'min': 100,
'max': 200,
'color': '#ea9999'
},
{
'min': 200,
'max': 400,
'color': '#cc0000'
},
{
'min': 400,
'max': 600,
'color': '#990000'
},
{
'min': 600,
'max': 1000,
'color': '#660000'
}
],
'Total deaths in Afghanistan per 100,000 pop': [
{
'min': 0,
'max': 0.2,
'color': '#f4cccc'
},
{
'min': 0.2,
'max': 0.4,
'color': '#ea9999'
},
{
'min': 0.4,
'max': 0.6,
'color': '#cc0000'
},
{
'min': 0.6,
'max': 1,
'color': '#990000'
},
{
'min': 1,
'max': 2,
'color': '#660000'
}
],
'Wounded, per 100,000 pop': [
{
'min': 0,
'max': 2,
'color': '#f4cccc'
},
{
'min': 2,
'max': 3,
'color': '#ea9999'
},
{
'min': 3,
'max': 4,
'color': '#cc0000'
},
{
'min': 4,
'max': 5,
'color': '#990000'
},
{
'min': 5,
'max': 8,
'color': '#660000'
}
]
}
var map, layer;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: center,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var style = [
{
featureType: 'administrative',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer = new google.maps.FusionTablesLayer({
query: {
select: location_column,
from: tableid
}
});
layer.setMap(map);
init_selectmenu();
addStyle(getKey());
}
function getKey() {
for(key in columns) {
return key;
}
}
// Initialize the drop-down menu
function init_selectmenu() {
var selectmenu = document.getElementById('selector');
for(column in columns) {
var option = document.createElement('option');
option.setAttribute('value', column);
option.innerHTML = column;
selectmenu.appendChild(option);
}
}
// Apply the style to the layer
function addStyle(column) {
var defined_styles = columns[column];
var styles = new Array();
for(defined_style in defined_styles) {
var style = defined_styles[defined_style];
styles.push({
where: generateWhere(column, style.min, style.max),
polygonOptions: {
fillColor: style.color,
fillOpacity: style.opacity ? style.opacity : 1
}
});
}
layer.set('styles', styles);
updateLegend(column);
}
// Create the where clause
function generateWhere(column_name, low, high) {
var whereClause = new Array();
whereClause.push("'");
whereClause.push(column_name);
whereClause.push("' >= ");
whereClause.push(low);
whereClause.push(" AND '");
whereClause.push(column_name);
whereClause.push("' < ");
whereClause.push(high);
return whereClause.join('');
}
// Create the legend with the corresponding colors
function updateLegend(column) {
var legendDiv = document.createElement('div');
var legend = new Legend(legendDiv, column);
legendDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].pop();
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legendDiv);
}
// Generate the content for the legend
function Legend(controlDiv, column) {
controlDiv.style.padding = '10px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.width = legend_width;
controlUI.title = 'Legend';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = legendContent(column);
controlUI.appendChild(controlText);
}
function legendContent(column) {
var defined_styles = columns[column];
// Generate the content for the legend using colors from object
var controlTextList = new Array();
controlTextList.push('<p><b>');
controlTextList.push(column);
controlTextList.push('</b></p>');
for(defined_style in defined_styles) {
var style = defined_styles[defined_style];
controlTextList.push('<div style="background-color: ');
controlTextList.push(style.color);
controlTextList.push('; height: 20px; width: 20px; margin: 3px; float: left;"></div>');
controlTextList.push(style.min);
controlTextList.push(' - ');
controlTextList.push(style.max);
controlTextList.push('<br style="clear: both;"/>');
}
controlTextList.push('<br />');
return controlTextList.join('');
}

Answer 2

My addin for Excel does exactly this.