0

自分のデータで Google Maps API Advanced Visualization の例を試しています。ただし、地図もチャートも表示されていません。Chrome のデバッガーは、エラーを次のようにリストしました:「Uncaught TypeError: プロパティ "offsetWidth" を null として読み取れません。

この特定のエラーに対する応答を 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>
4

1 に答える 1

0

マップを保持する div のサイズを必ず指定してください。

さらに、マップ変数がグローバル スコープで定義されていることを確認し、DOM ロード時、つまりボディ ロード時にマップを初期化するようにしてください。

于 2012-05-30T07:44:07.250 に答える