Question

I am using google geochart to put markers on a map. I want to be able to dynamically add and remove markers on the map with out having to redraw the map each time. Is there a way to accomplish that?

Thanks
Here is my code:

<div align="center">
  <div id="chart_div">
    <div id="loadingDiv"></div>
  </div>
</div>

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript">
  //Load the Google Maps stuff
  google.load('visualization', '1', {'packages': ['geochart']});
  google.setOnLoadCallback(drawRegionsMap);

  //Load the Google Maps stuff
  google.load('visualization', '1', {'packages': ['geochart']});
  google.setOnLoadCallback(drawRegionsMap);


  function drawRegionsMap() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'latitude');
    data.addColumn('number', 'longitude');
    data.addColumn('string', 'Location');
    data.addColumn('number', 'Size');

    //While iterating thru clients flag if user is in list, If not flagged add user to map.
    //Firefox doesn't seem to be including user in list
    var inList = false;
    for (i in clientInfo){ client = clientInfo[i];

      //Because new clients are creating with this connection, we don't want to add them to map.
      //Their clientInfo won't have an ipAddress. Only want to map one client per session
      if (client.ipAddress){
        //Flag if user is in client list
        if(client.ipAddress == userInfo.ipAddress){
          inList = true;
        }
        data.addRow([parseFloat(client.latitude), parseFloat(client.longitude), client.cityName, 4]);
      }
    }

    //If user is not in client list add him now.
    if(!inList){
      if(userInfo.ipAddress){
      data.addRow([parseFloat(userInfo.latitude), parseFloat(userInfo.longitude), userInfo.cityName, 4]);
      }
    }


    var options = {
      displayMode: 'markers',
      colorAxis: {colors: ['red', 'blue']},
      sizeAxis: {minValue: 0, maxValue: 5, minSize: 1, maxSize: 4},
      enableRegionInteractivity: true,
      legend: 'none'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    google.visualization.events.addListener(chart, 'regionClick', function (eventData) {
      alert('You clicked: ' + eventData.region);
    });
    chart.draw(data, options);
  }
</script>

Answer 1

You can create a dashboard and bind a control to it – for example the CategoryFilter. The chart will be updated automatically as the control’s filter is modified.

However, this is limited and given your use case you will probably have to call the draw function yourself.