google maps APIのinfowindowのコンテンツ文字列でGoogleのグラフツールを使用

Question

私はinfoBubbleを使用してGoogleのグラフツール（画像の図ではなく、可視化APIから）を使用しようとしています。 infobubbleは素晴らしいです。私はそれが必要なものを正確に行います。私のプロジェクトでは、infobubbleのタブの1つでチャートを使用するように求められています。だから、私はdivのコンテンツにチャートを作成するcontentStringを構築するためにこのコード（下記参照）を使用しようとしています。しかし、チャートは何も起こらない。特にコンテンツ文字列で何かが間違って見えるのですか？

//returns the status string 
function GetPublicProjectStatusString(data){ 

    var contentString = '<div id="content" style="margin:0;">'+ 
      '<h3>' + 'Project Phase' + '</h3>'+ 
      '<p>' + data.ProjectPhase + '</p>'+ 
      '<div id="parentDiv">' + 
       '<div id="chartDiv" style="top:0px;left:0px;width:200px;height:200px;">' + 
       '</div>' + 
       '<div id="secondDiv">' + 
        '<h3>' + 'Start Date' + '</h3>' + 
       '</div>' + 
      '</div>' + 
     '</div>' + 
     '<script type="text/javascript">' + 
      'var chartdata = new google.visualization.DataTable();' + 
      'chartdata.addColumn("string", "Source");' + 
      'chartdata.addColumn("number", "Amount");' + 
      'chartdata.addRows([' + 
       '["Federal",4],' + 
       '["State",8],' + 
       '["County",9],' + 
       '["Local",14],' + 
      ']);' + 
      'var options = {"title":"Project Budget"' + 
       '"width":200,' + 
       '"height":200};' + 
      'var chart = new google.visualization.PieChart(document.getElementById("chartDiv"));' + 
      'chart.draw(data,options);' + 
     '</script>'; 

    return contentString; 

} 

Answer 1

コンテンツ文字列にスクリプトタグを使用できるとは思わないので、次のアプローチが役立つかもしれないと思います。

あなたは

var contentString = "<div id='chart_div'></div>"; 

は、コンテンツの文字列でのdivにグラフを追加するように適合させることができ、このGoogleのチャートの例を見て持っているあなたのグラフを配置したいコンテンツの文字列にDIVを使用します。

をそれはの一部ではないとして、あなたが直接（チャートの例で行われている）、それにグラフを追加することはできませんので、あなたのコンテンツの文字列のdivのは、おそらく、マーカーをクリックするなどのユーザーの入力によって作成されますが

Google Charts Tools Example

ドームまだ。したがって、あなたはinfoBubbleを作成するイベントを聴かなければなりません。

google.maps.event.addListener(infoWindow, 'domready', function() { drawChart(); }); 

情報ウィンドウはあなたがに適応チャートのコード例をラップする機能を作成し、drawChart情報ウィンドウで

：GoogleマップのAPIのマーカーに接続されている情報ウィンドウでは、これはこのようなものになります

これが役立つことを願っています。

Answer 2

domreadyイベントハンドラ内のchart::draw()を呼び出すことができませんでしたが、私が見ていた「...ブラウザはGoogle Chartsをサポートしていません」というエラーメッセージが表示されていました。