Nel
Hi,
I have infoboxes with text inside and instead of text I want to have a pie chart and to fill the pie chart data table from lists. I have this function for creating the infoboxes for every marker on the map:
function initialize() { var mcenter = new google.maps.LatLng(26.368755, -80.137413), markers, myMapOptions = { zoom: 16, center: mcenter, mapTypeId: google.maps.MapTypeId.ROADMAP }, map = new google.maps.Map(document.getElementById("donutchart"), myMapOptions); var bounds = new google.maps.LatLngBounds(); ............. ...........
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 }), boxText = document.createElement("div"), infoboxOptions = { pieHole: 0.4, 'width': 400, 'height': 150 }; newMarkers.push(marker); boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;"; boxText.innerHTML = '<b class="marker-heading">' + markerData[i].address + '</b>' + "<br>" + "------------------------" + "<br>" + markerData[i].state + "<br>" + markerData[i].cycles + "<br>" + markerData[i].Los; //original newMarkers[i].infobox = new InfoBox(infoboxOptions); newMarkers[i].infobox.open(map, marker); var data = new google.visualization.DataTable(); data.addColumn('string', 'state'); data.addColumn('string', 'cycle'); data.addColumn('string', 'los'); for (i = 0; i < spl.length; i++) data.addRow([markerData[i].state, markerData[i].cycle, markerData[i].los]); chart.draw(data, infoboxOptions); pie.dataSource.data(boxText); 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; }
....................
<div id="donutchart" style="height:300px;"></div>
but it doesn't work, neither the markers, nor the infoboxes appear on the map, and I don't know what the problem is. Can anybody help me please?