使用谷歌地圖api添加谷歌圖表到infowindow

Question

我見過很多其他人有同樣的問題，但無法找到答案。 我有一個使用Google Maps Javascript API v3構建的簡單地圖。 地圖有幾個標記鏈接到infowindow以顯示每個標記的特定信息。 我想添加一個谷歌圖表infowindow，但只是不知道如何做到這一點。 我經歷了每一個我可以找到的帖子（在這裏和其他論壇），我注意到其他人試圖做類似的事情，但似乎沒有具體的答案。 我注意到人們使用融合表來做這樣的事情是成功的，但這不是我的情況，因爲我從MySQL表中加載數據。 現在我有一個簡單的地圖，其中代碼如下所示：

function initialize() { 

    var mapOptions = { 
     center: new google.maps.LatLng(-33.837342,151.208954), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 

    var data = [ 
     ['Bondi Beach', -33.891044,151.275537], 
     ['Cronulla Beach', -34.046544,151.159601], 
    ]; 

    var myLatLng1 = new google.maps.LatLng(-33.891044,151.275537); 
    var myLatLng2 = new google.maps.LatLng(-34.046544,151.159601); 

    var marker1 = new google.maps.Marker({ 
     position: myLatLng1, 
     map: map 
    }); 

    var marker2 = new google.maps.Marker({ 
     position: myLatLng2, 
     map: map 
    }); 

    google.maps.event.addListener(marker1, 'click', function() { 
     var infowindow1 = new google.maps.InfoWindow(); 
     infowindow1.setContent('Display the chart here'); 
     infowindow1.open(map, marker1); 
    }); 

    google.maps.event.addListener(marker2, 'click', function() { 
     var infowindow2 = new google.maps.InfoWindow(); 
     infowindow2.setContent('Display the chart here'); 
     infowindow2.open(map, marker1); 
     infowindow2.setContent('Display the chart here'); 
     infowindow2.open(map, marker2); 
    });   
    }  

和這裏爲簡單圖表例如代碼：

https://google-developers.appspot.com/chart/interactive/docs/quick_start

我已經嘗試許多不同的方法而對我來說更爲明顯的是在InfoWindow的setContent屬性中添加一個container（），然後調用一個創建圖表的外部函數。由於該功能無法看到容器，因此似乎不起作用。 我也嘗試嵌入整個代碼在setContent屬性圖上這個帖子的建議：

using google chart tools in a google maps api infowindow content string

我已經成功，沒有錯誤來執行代碼，但是什麼也看不見了。 Anotther方法將在另一個html頁面中創建圖表，並以某種方式將此頁面設置爲setContent屬性，但也未取得成功。

我即將放棄，因爲我看不到這樣做的一種方式。

我很感激任何幫助。

感謝

何塞

Answer 1

該好好嘗試一下似乎工作作爲函數不能看到容器。

您可以通過容器作爲參數傳遞給drawChart()

但我猜你喜歡畫畫填充相關的標記數據圖表，所以我建議通過標記爲參數drawChart（）和在那裏創建infoWindow。

示例代碼（不帶標識相關的數據implementaion，因爲它不是清楚你喜歡什麼樣的數據來繪製）

 function drawChart(marker) { 

    // Create the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addRows([ 
     ['Mushrooms', 3], 
     ['Onions', 1], 
     ['Olives', 1], 
     ['Zucchini', 1], 
     ['Pepperoni', 2] 
    ]); 

    // Set chart options 
    var options = {'title':'Pizza sold @ '+ 
          marker.getPosition().toString(), 
        'width':300, 
        'height':200}; 

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

用法：

google.maps.event.addListener(marker1, 'click', function() { 
    drawChart(this); 
}); 

演示：http://jsfiddle.net/doktormolle/S6vBK/