title: selecting marker on geochart
body: <p>I have a few cities plotted on a Geochart and I'm trying to simply allow the user to click on a marker to select their location. For now, I'm just using an alert box for testing.</p>
  
  <p>Right now I'm ONLY listing city names, no population, size, area, or numbers are attached.</p>
  
  <p><strong>edit-this runs in jsFiddle, however I can't get it to run on it's own page. Does anyone see something that I don't?</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type='text/javascript' src='https://www.google.com/jsapi'&gt;&lt;/script&gt;
  &lt;script type = "text/javascript"&gt;
  
  google.load('visualization', '1', {
  'packages': ['geochart']
  });
  google.setOnLoadCallback(drawMarkersMap);
  
  function drawMarkersMap() {
  
     var newInfo = google.visualization.arrayToDataTable([
       ['City'],
       ['Rome'],
       ['Truth or Consequences'],
       ['Ann Arbor'],
       ['Chico'],
       ['Los Angeles'],
       ['Seattle'],
       ['Chicago'],
       ['Lubbock']
       ]);
  
  var chart = new google.visualization.GeoChart(document.getElementById('geoChart'));
  
  chart.draw(newInfo, {
      width: 667,
      height: 416,
      datalessRegionColor: '#3FADD1',
      tooltip: {
          textStyle: {
              color: 'blue'
          },
          showColorCode: false
      },
      displayMode: 'markers',
      region: 'US',
      resolution: 'provinces'
     });
  
  google.visualization.events.addListener(chart, 'select', function() {
      var selection = chart.getSelection();
  
      // if same city is clicked twice in a row
      // it is "unselected", and selection = []
      if(typeof selection[0] !== "undefined") {
        var value = newInfo.getValue(selection[0].row, 0);
        alert('City is: ' + value);
      }
  });
  
  };​
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="geoChart" style="width: 250px; height: 400px;"&gt;&lt;/div&gt;
  &lt;/body&gt;​
  &lt;/html&gt;
  </code></pre>