1

Google マップの情報ウィンドウに Google チャートを追加するのに本当に苦労しました。だから、私は以下の投稿でモール博士からの本当に貴重な助けを見つけました（もう一度感謝します）.

Google マップ API を使用して情報ウィンドウに Google チャートを追加する

私の苦労は、情報ウィンドウに複数のグラフを追加することです。innerHTML を介して各コンテナーを連結することができましたが、グラフの機能が失われることを除いて (マウス オーバー オプションを使用できません)、正常に動作します。

これは、innerHTML を使用して追加するために思いついたコードです。チャート機能を保持する方法があるかどうか知りたいです。

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

1 に答える 1

1

<div>チャートごとに を作成し、両方を別の div タグに追加して、それをInfoWindowのコンテンツとして設定できると思います。

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);
于 2013-02-05T17:46:28.747 に答える