Google Chart into Infowindow

Question

我似乎无法在互联网上找到适合当前问题的好解决方案。我想将谷歌图表显示到infowindow。但我一直空着。有人可以帮帮我吗？

这是标记代码和infowindow的副本。它位于一个循环中，因此我可以获得多个标记。

    for (i = 0; i < get_markers.length; i++) { 

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(get_markers[i][1], get_markers[i][2]),
                map: map});

        google.maps.event.addListener(marker, 'click',(function(marker, i,infowindow) 
        {
            return function() {

                        var con = '<div id="chart_div1"></div>';

            infowindow.setContent(con);
            infowindow.open(map, marker);
            map.setCenter(marker.getPosition());

            drawChart(this);
        }

    })(marker, i,infowindow));
     markers.push(marker);

这就是我能够查看我的谷歌图表的方式。（不在信息窗口内）

google.load('visualization', '1', {'packages':['corechart']});

google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable(<?=$jsonTable?>);
  var options = {
      title: 'By Crime Type',
      is3D: 'true',
      width: 500,
      height: 300
    };
 var chart = new google.visualization.BarChart(document.getElementById('chart_div1'));
  chart.draw(data, options);}

我想将谷歌图表放在信息窗口内。任何建议都绝对值得赞赏。谢谢！请帮我解决这个问题。

我知道有很多此类事件，但我无法关注它们，因为我仍然是这个谷歌图表领域的新手。

Answer 1

for（i = 0; i＆lt; get_markers.length; i ++）{

        var marker1 = new google.maps.Marker({
                position: new google.maps.LatLng(get_markers[i][1], get_markers[i][2]),
                map: map});

        google.maps.event.addListener(marker1, 'click', function() {
        drawChart(this);
        window.location.href="?brgy_id="+get_markers[i][0];
        infowindow.open(map,marker);

        });

}

Answer 2

for (i = 0; i < locations.length; i++) 
{
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map,
        icon: locations[i][2]
    });
    markers.push(marker);
    addInfoWindow(marker, locations[i][3]);
}

function addInfoWindow(marker, message) 
{
    var infoWindow = new google.maps.InfoWindow({
        content: message
    });

    google.maps.event.addListener(marker, 'click', function () {
        //infoWindow.open(map, marker);
        drawChart(map, marker);
    });
}

function drawChart(map, marker) {
    //Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
    ['Customer Coverage', 14],
    ['Call Average', 09],
    ['MTP Deviation', 04],
    ['SGPI Compliance', 06],
    ['Campaign Compliance', 05]
    ]);

    //Set chart options
    var options = {
        'title': 'KPI',
        'width': 300,
        'height': 150
    };

    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(map, marker);
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>