我正在使用我的数据尝试 Google Maps API 高级可视化示例。但是，地图和图表都没有显示。Chrome 上的调试器将错误列为：“未捕获的类型错误：无法将属性“offsetWidth”读取为空。
我在 Stack 和旧的 google 群组中阅读了对特定错误的回复，但没有任何建议对我有用。
我希望有人可以查看代码并让我知道我缺少什么。我很确定它是非常小的东西，但我已经碰壁了，所以希望能有另一双眼睛关注它。
请注意，这是示例代码的确切版本 - 稍微调整了我的数据集以便能够检查它。
提前致谢。代码如下。
-马达维
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', { packages: ['corechart'] });
/** * Sector type mapped to a style rule. * @type {Object} * @const */ var LAYER_STYLES = { 'Operational': { 'min': 0, 'max': 10000, 'colors': [ '#f4cccc', '#ea9999', '#e06666', '#cc0000',
'#990000' ] }, 'Formally Approved': { 'min': 0, 'max': 10000, 'colors': [ '#d0e0e3', '#a2c4c9', '#76a5af', '#45818e', '#134f5c' ] }, 'In-Principle Approved': { 'min': 0, 'max': 20000, 'colors': [
'#d9d2e9', '#b4a7d6', '#8e7cc3', '#674ea7', '#351c75' ] } }
function initialize() {
var sector = 'Operational';
var india = new google.maps.LatLng(21.7679,78.8718); var options = {}; options['dataMode'] = 'markers';
map = new google.maps.Map(document.getElementById('map_canvas'), { center: india, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL },
});
var layer = new google.maps.FusionTablesLayer(); updateLayerQuery(layer, sector); layer.setMap(map);
createLegend(map,sector); styleLayerBySector(layer,sector); styleMap(map); drawVisualization('Andhra Pradesh');
google.maps.event.addListener(layer,'click',function(e) { var state = e.row['State'].value; drawVisualization(state);
var area = e.row['Area in Acres'].value; if (area > 5000) { e.infoWindowHtml = '<p class="high">High SEZ area!</p>'; } else if (area > 2500) { e.infoWindowHtml = '<p class="high">Medium SEZ area!</p>
'; } else { e.infoWindowHtml = '<p class="high">Low SEZ area!</p>'; }
});
google.maps.event.addDomListener(document.getElementById('sector'), 'change',function() { sector = this.value; updateLayerQuery(layer,sector); styleLayerBySector(layer,sector); updateLegend(sector);
});
google.maps.event.addDomListener(document.getElementById('state'), 'change',function() { var state = this.value; updateLayerQuery(layer,sector,state); drawVisualization(state); }); };
function updateLayerQuery(layer,sector,state) { var where = "SEZ Type= '"+ sector + "'"; if (state) { where += "AND State = '" + state + "'"; } layer.setOptions({ query: { select : 'geometry', from:
'4070871', where: where } }); }
function createLegend(map, sector) { var legendWrapper = document.createElement('div'); legendWrapper.id = 'legendWrapper'; legendWrapper.index = 1;
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push( legendWrapper); legendContent(legendWrapper, sector); }
function legendContent(legendWrapper, sector) { var legend = document.createElement('div'); legend.id = 'legend';
var title = document.createElement('p'); title.innerHTML = sector + ' SEZs by State in India'; legend.appendChild(title);
var layerStyle = LAYER_STYLES[sector]; var colors = layerStyle.colors; var minNum = layerStyle.min; var maxNum = layerStyle.max; var step = (maxNum - minNum) / colors.length; for (var i = 0; i <
colors.length; i++) { var legendItem = document.createElement('div');
var color = document.createElement('div'); color.setAttribute('class', 'color'); color.style.backgroundColor = colors[i]; legendItem.appendChild(color);
var newMin = minNum + step * i; var newMax = newMin + step; var minMax = document.createElement('span'); minMax.innerHTML = newMin + ' - ' + newMax; legendItem.appendChild(minMax);
legend.appendChild(legendItem); }
legendWrapper.appendChild(legend); }
function updateLegend(sector) { var legendWrapper = document.getElementById('legendWrapper'); var legend = document.getElementById('legend'); legendWrapper.removeChild(legend); legendContent(
legendWrapper, sector); }
function styleLayerBySector(layer, sector) { var layerStyle = LAYER_STYLES[sector]; var colors = layerStyle.colors; var minNum = layerStyle.min; var maxNum = layerStyle.max; var step = (maxNum -
minNum) / colors.length;
var styles = new Array(); for (var i = 0; i < colors.length; i++) { var newMin = minNum + step * i; styles.push({ where: generateWhere(newMin, sector), polygonOptions: { fillColor:
colors[i], fillOpacity: 1 } }); } layer.set('styles', styles); }
function generateWhere(minNum, sector) { var whereClause = new Array(); whereClause.push("Sector = '"); whereClause.push(sector); whereClause.push("' AND 'Area in Acres' >= "); whereClause.push(minNum);
return whereClause.join(''); }
function styleMap(map) { var style = [{ featureType: 'all', stylers: [{ saturation: -99 }] }, { featureType: 'poi', stylers: [{ visibility: 'off' }] }, { featureType: 'road', 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'); }
function drawVisualization(state) { google.visualization.drawChart({ containerId: "visualization", dataSourceUrl: "http://www.google.com/fusiontables/gvizdata?tq=", query: "SELECT 'SEZ Type' as Sector,
'Area in Acres' as Area " + "FROM 4070871 WHERE State = '" + state + "'", chartType: "ColumnChart", options: { title: state, height: 400, width: 400 } }); }
google.maps.event.addDomListener(window, 'load', initialize()); </script> </head> <body >
<div id="map-canvas" style="width: 500px;height: 500px">Loading..</div> <div id="visualization"></div> <form> <label>SEZ Type </label> <select id="sector"> <option value="Operational">Operational
</option> <option value="Formally Approved">Formally Approved</option> <option value="In-Principle Approved">In-Principle Approved</option> </select>
<label>State</label> <select id="state"> <option value="Andhra Pradesh">Andhra Pradesh</option> <option value="Chandigarh">Chandigarh</option> <option value="Chattisgarh">Chattisgarh</option> <option
value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option> <option value="Delhi">Delhi</option>
</select> </form> </body> </html>