Changing the content in the infoWindow from text to pie char

Question

Hello,

I made my web form to display infowindows for every marker on the Google Maps, and it works good. But, when I tried to change the text in the infoWindow to pie chart it doesn't work anymore. The pie chart is not drawn, and the infowindow doesn't appear at all.

Here is the part of the code where I define the infoboxes and the content inside

 

function initMarkersE(map, markerData) {

 

var newMarkers = [],

marker;

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

bounds.extend(markerData[i].latLng);

map.fitBounds(bounds);

marker = new google.maps.Marker({

map: map,

draggable: true,

position: markerData[i].latLng,

visible: true

}),

newMarkers.push(marker);

var data = [['state', 'cycles', 'Los']];

data.push([markerData[i].state, markerData[i].cycles, markerData[i].Los]);

infoboxOptions = {

pieHole: 0.4,

'width': 400,

'height': 150

};

var node = document.createElement("div");

newMarkers[i].infobox = new InfoBox(infoboxOptions),

chart = new google.visualization.PieChart(node);

alert(markerData[i].state);

alert(markerData[i].cycles);

alert(markerData[i].Los);

chart.draw(data, infoboxOptions);

infobox.setContent(node);

newMarkers[i].infobox.open(map, marker);

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

return function () {

newMarkers[i].infobox.open(map, this);

map.panTo(markerData[i].latLng);

}

})(marker, i));

}

return newMarkers;

}

 

I changed/added only the bold part of the code, the rest is the same like when the infoboxes were displaying text data. So the same data/parameters I want to be displayed as a pie chart.

Can anybody help me please?

Thanks.