谷歌地图 API - 融合表图层示例 - 地图未显示

我正在用我的数据尝试谷歌地图API高级可视化示例。 但是，地图和图表均未显示。Chrome 上的调试器将错误列为："未捕获的类型错误： 无法将属性"偏移宽度"读取为 null。

我在 Stack 和旧的谷歌群组中阅读了对该特定错误的响应，但没有一个建议对我有用。

我希望有人可以看看代码，让我知道我错过了什么。我很确定这是一件非常小的事情，但我已经碰壁了，所以希望有另一双眼睛来关注它。

请注意，这是示例代码的确切版本 - 为我的数据集稍作调整以便能够检查出来。

提前谢谢。代码如下。

-马达维

  <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>