Google geochart displaying city in the wrong region

Question

You can see what I'm saying by putting this code:

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Kansas City', 200],
  ]);
  var options = {width: 556, height: 347, displayMode : 'markers', region: 'ES'};
  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, options);
}

into google's playground here:

https://code.google.com/apis/ajax/playground/?type=visualization#geo_chart

You can see that Kansas City is being rendered in Spain, which is incorrect. This also happens for other combination of regions and cities. Am I doing something wrong here? or this is a Geochart bug?

EDIT: I think asgallant is right. It seems Geochart is finding an avenue called Kansas City in Spain, now the question is: how can I tell geochart that I'm only looking for cities? I want to give you more context about this problem. I'm setting the region to ES on purpose. I'm working on an app which contains data from all over the world. There's a functionality where I allow the user to zoom into a region. In this case Spain. I know I could just remove Kansas City when zooming in and put it back when zooming out, but I'm trying to avoid that. Thanks!

Answer 1

Thank you asgallant, you are absolutely right. That's why I solved this problem by using this API: https://developers.google.com/maps/documentation/geocoding Basically I'm geocoding the city names before rendering them and I'm storing the coordinates in my database. Then I just draw the geochart using the coordinates. By doing that I'm not only solving this problem, but I'm also speeding up the rendering of the chart.