Add multiple charts into a Google Maps Infowindow

Question

I was really struggling to add a google chart onto a google maps infowindow. So, I've found a really precious help from Dr. Molle (thanks once again mate) on the post below.

Add a google chart to a infowindow using google maps api

My struggle now is to add more than one chart into the infowindow. I've managed to do so concatenating each container through its the innerHTML and it works just fine, except for the fact that the chart loses its functionality (can't use the mouse over option).

This is the code I came up with to add using the innerHTML and I'd like to know if there's a way to preserve the charts functionality.

   function drawChart(marker,map) {

    // Create the data table.
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Orange', 80],
      ['Apple', 55],
      ['Watermelon', 68]
    ]);

    var options = {
      width: 300, height: 150,
      redFrom: 0, redTo: 25,
      yellowFrom:26, yellowTo: 50,
      greenFrom:51, greenTo: 100,
      minorTicks: 5
    };


    var nodeGauge   = document.createElement('chart_div'),
        infoWindow  = new google.maps.InfoWindow(),
        nodeCol    = document.createElement('col_div');
        chart      = new google.visualization.Gauge(nodeGauge);
        colChart   =  new google.visualization.ColumnChart(nodeCol);


        colChart.draw(data,{});
        chart.draw(data, options);

        infoWindow.setContent(nodeGauge.innerHTML + nodeTab.innerHTML);
        infoWindow.open(map,marker);
  } 

Answer 1

I think you can create a <div> for each chart, append them both to another div tag, and set that as the InfoWindow's content.

var nodeGauge   = document.createElement('div'),
    infoWindow  = new google.maps.InfoWindow(),
    nodeCol    = document.createElement('div'),
    parentDiv  = document.createElement('div');
    chart      = new google.visualization.Gauge(nodeGauge);
    colChart   =  new google.visualization.ColumnChart(nodeCol);

parentDiv.appendChild(nodeGauge);
parentDiv.appendChild(nodeCol);

colChart.draw(data,{});
chart.draw(data, options);

infoWindow.setContent(parentDiv);
infoWindow.open(map,marker);