Post
Ask Question
Nel

Nel

  • NA
  • 716
  • 1.1m

Create a pie chart's data table for marker's infobox

Jun 16 2014 8:14 PM

       

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?