Google Maps: InfoWindow with Chart from fusion table and depending on selected layer

Question

I would like to visualise a number of variables per country on a world map. With Google Fusion Tables I set up the map. Now I would like to flip between the variables/layers (Var_A and Var_B) I would like to visualise with a dropdown menu. I followed the code the Guardian used in this article. In this example the formatting of the info window in the FusionTable itself seems to simply show up but that doesn't work for me.

This is the fusion table: 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

Clicking on the respective country I would like to display an info window, which shows a chart (bar chart for example) showing the values Var_A and Var_A1 when Layer 'Var_A' is selected and Var_B and Var_B1 when Layer 'Var_B' is selected.

I tried with the code example in 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);
      }

... but not even the static google chart worked for me.

So I really have three problems here:

1) show ANY chart in the info window

2) show a chart using data from the respective data row (country)

3) show a chart using data from the respective data row (country) and depending on the selected layer

I tried for a couple of days now with many unsuccessful ways and I am stuck - ready to leave google maps if I can not get it to work. This is the fiddle of the last thing that did at least show a map - I had to remove all event listeners again...

fiddle: http://jsfiddle.net/sytpp/ovfauhwb/

Any help greatly apprechiated!!

Dr.Molle · Answer 1 · 2014-10-09T11:38:27.020

observe the click-event of the FusionTablesLayer, you will get there the values for the particular row:

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);
});

Now use the data(Note: you may initially set the content of the infoWindow to an empty div-element, there is no need to create a new node each time)

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});

}

Note: you must set the suppressInfoWindows-option of the FusionTablesLayer to true, otherwise 2 InfoWindows will open, the built-in and the custom where the chart will be drawn.

Demo: http://jsfiddle.net/doktormolle/o1fyarnf/

Google Maps: InfoWindow with Chart from fusion table and depending on selected layer

1 Answers1