如何使用谷歌地圖API

Question

創造密度地圖，我想創建類似鏈接密度圖下方

http://www.guardian.co.uk/news/datablog/interactive/2011/jun/22/us-casualties-afghanistan-state

請人步能告訴怎麼這種類型的地圖可以創建。

謝謝

Answer 1

他們使用FusionTablesLayer來做到這一點。

他們的地圖相關的全部JS從該頁面：

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

我addin for Excel正是這樣做的。