title: Drawing pie charts on google map using for loop does not functioning well
body: <p>I tried to draw pi charts on several locations in a google map. I came up with a code which draws pie charts on several locations using a for loop. I need to add a click event to all the pie charts to display a window with pie chart details. But the on click event is not functioning well. Could anyone please help me to come with a solution for this issue.
  The following is the code I tried with.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css"&gt;
      &lt;script  src="http://code.jquery.com/jquery-1.7.2.js"&gt;&lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.10&amp;sensor=false&amp;.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi?.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          google.load( 'visualization', '1', { packages:['corechart'] });
          ChartMarker.prototype = new google.maps.OverlayView;
          ChartMarker.prototype.onAdd = function() {
              $( this.getPanes().overlayMouseTarget ).append( this.$div );
          };
  
          ChartMarker.prototype.onRemove = function() {
              this.$div.remove();
          };
  
          ChartMarker.prototype.draw = function() {
              var marker = this;
              var projection = this.getProjection();
              var position = projection.fromLatLngToDivPixel( this.get('position') );
  
              this.$div.css({
                  left: position.x,
                  top: position.y,
                  display: 'block'
              })
  
              this.$inner
                      .html( '&lt;img src="' + this.get('image') + '"/&gt;' )
                      .click( function( event ) {
                          var events = marker.get('events');
                          events &amp;&amp; events.click( event );
                      });
  
              this.chart = new google.visualization.PieChart( this.$inner[0] );
              this.chart.draw( this.get('chartData'), this.get('chartOptions') );
          };
  
  
          function drawChart(marker, data, event, location) {
  
  
              var options = {'title':'Event : '+event+'  Location : '+location,
                  'width':400,
                  'height':150,
                  slices: {0: {color: 'orange'}, 1:{color: 'green'}, 2:{color: 'yellow'}, 3: {color: 'blue'}, 4:{color: 'red'}}};
  
              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);
          }
          function ChartMarker( options ) {
              this.setValues( options );
              this.$inner = $('&lt;div&gt;').css({
                  position: 'relative',
                  left: '-50%', top: '-50%',
                  width: options.width,
                  height: options.height,
                  fontSize: '1px',
                  lineHeight: '1px',
                  padding: '2px',
                  backgroundColor: 'transparent',
                  cursor: 'default'
              });
              this.$div = $('&lt;div&gt;')
                      .append( this.$inner )
                      .css({
                          position: 'absolute',
                          display: 'none'
                      });
          };
          function drawPieCharts(map,latlang){
              var data = google.visualization.arrayToDataTable([
                  [ 'Task', 'Hours per Day' ],
                  [ 'Work', 11 ],
                  [ 'Eat', 2 ],
                  [ 'Commute', 2 ],
                  [ 'Watch TV', 2 ],
                  [ 'Sleep', 7 ]
              ]);
              var options = {
                  fontSize: 8,
                  backgroundColor: 'transparent',
                  legend: {position: 'none'}
              };
              var marker = new ChartMarker({
                  map: map,
                  position: latlang,
                  width: '250px',
                  height: '100px',
                  chartData: data,
                  chartOptions: options,
                  events: {
                      click: function( event ) {
                          drawChart(marker,data)
                      }
                  }
              });
          }
          function initialize() {
              var latLng = new google.maps.LatLng(-33.890542, 151.274856)
              var markers = [
                  [ -33.890542, 151.274856, 50,40,21,40],
                  [-33.923036, 151.259052, 67,89,23,67],
                  [-34.028249, 151.157507, 45,67,23,90],
                  [-33.80010128657071, 151.28747820854187,456,234,789,90],
                  [-33.950198, 151.259302,456,34,90,23]
              ];
              var mapOptions = {
                  center: latLng,
                  zoom: 12,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              var map = new google.maps.Map(document.getElementById("map_canvas"),
                      mapOptions);
              for(var k=0;k&lt;markers.length;k++){
                  var location = new google.maps.LatLng(markers[k][0],markers[k][1])
                  var data = google.visualization.arrayToDataTable([
                      [ 'Task', 'Hours per Day' ],
                      [ 'Work', markers[k][2] ],
                      [ 'Eat', markers[k][3] ],
                      [ 'Commute',markers[k][4] ],
                      [ 'Watch TV', markers[k][5] ],
                      [ 'Sleep', markers[k][6] ]
                  ]);
                  var options = {
                      fontSize: 8,
                      backgroundColor: 'transparent',
                      legend: {position: 'none'}
                  };
                  var marker = new ChartMarker({
                      map: map,
                      position: location,
                      width: '250px',
                      height: '100px',
                      chartData: data,
                      chartOptions: options,
                      events: {
                          click: function( event ) {
                              drawChart(marker,data)
                          }
                      }
                  });
              }
          };
          google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body &gt;
  &lt;div id="map_canvas" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>