谷歌地图：信息窗口与融合表中的图表并取决于所选图层答案

【问题标题】：Google Maps: InfoWindow with Chart from fusion table and depending on selected layer谷歌地图：信息窗口与融合表中的图表并取决于所选图层
【发布时间】：2014-12-01 22:05:12
【问题描述】：

我想在世界地图上可视化每个国家/地区的一些变量。我使用 Google Fusion Tables 设置了地图。现在我想在我想用下拉菜单可视化的变量/层（Var_A 和 Var_B）之间切换。我遵循了卫报在this article 中使用的代码。在此示例中，FusionTable 本身中信息窗口的格式似乎很简单，但这对我不起作用。

这是融合表：https://www.google.com/fusiontables/embedviz?viz=GVIZ&t=TABLE&q=select+col0%2C+col1%2C+col2%2C+col3%2C+col4%2C+col5%2C+col6%2C+col7+from+19I14XgRDOk7697iWA8XSukbYBBelNRymFOqjw_ru&containerId=googft-gviz-canvas

单击相应的国家/地区，我想显示一个信息窗口，该窗口显示图表（例如，选择图层'var_a'和var_b和var_b1时，显示值var_a和var_a1的图表（条形图）选择。

我尝试了Add a google chart to a infowindow using google maps api ....中的代码示例。

   function drawChart(marker) {

        var node        = document.createElement('div'),
            infoWindow  = new google.maps.InfoWindow(),
            chart       = new google.visualization.PieChart(node);

            chart.draw(data, options);
            infoWindow.setContent(node);
            infoWindow.open(marker.getMap(),marker);
      }

...但即使是静态谷歌图表也不适合我。

所以我这里真的有三个问题：

1) 在信息窗口中显示任何图表

2) 使用来自相应数据行（国家/地区）的数据显示图表

3) 使用来自相应数据行（国家）的数据并根据所选图层显示图表

我现在尝试了几天，尝试了许多不成功的方法，但我被困住了 - 如果我不能让它工作，我准备离开谷歌地图。这是至少显示地图的最后一件事的小提琴 - 我不得不再次删除所有事件侦听器......

小提琴：http://jsfiddle.net/sytpp/ovfauhwb/

非常感谢任何帮助！

【问题讨论】：

标签： javascript google-maps-api-3 google-fusion-tables infowindow

【解决方案1】：

观察 FusionTablesLayer 的点击事件，您将获得特定行的值：

google.maps.event.addListener(layer,'click',function(e){
    //which values need to be drawn in the chart, A or B ?
    var prefix=document.getElementById('selector').value,

    //collect the data
    row={title:e.row.Country.value,rows:[]};
    //Var_A or Var_B
    row.rows.push([prefix,Number(e.row[prefix].value)]);
    //Var_A or Var_B1
    row.rows.push([prefix+'1',Number(e.row[prefix+'1'].value)]);
    //call drawChart by passing the collected data and clicked position as arguments 
    drawChart(row,e.latLng);
});

现在使用数据（注意：可以先将infoWindow的内容设置为空的div元素，不需要每次都创建新节点）

function drawChart(row,position) {

    // Create the data table.
    var data = new google.visualization.DataTable();
    //set the scheme
    data.addColumn('string', 'label');
    data.addColumn('number', 'amount');
    //add the data
    data.addRows(row.rows);

    // Set chart options
    var options = {'title':row.title,
                   'width':300,
                   'height':200,
                   legend:'none'};

    //assuming the infoWindow already has the content set to a DOMNode, e.g. a div
    var chart       = new google.visualization.BarChart(infoWindow.getContent());

    chart.draw(data, options);

    infoWindow.setOptions({map:map,position:position});

}

注意：必须将FusionTablesLayer的suppressInfoWindows-option设置为true，否则会打开2个InfoWindows，内置和自定义绘制图表的位置。

演示：http://jsfiddle.net/doktormolle/o1fyarnf/

【讨论】：