文句を言う割には Google に依存してしまっている今日この頃です。
表の中の項目をクリックすると、地図の上でも対応する場所が選択されます。
タイトルにもあるとおり、Map Tools ではなく、Chart Tools を使っています。従って、Map Tools の機能のうち幾つかは使えません。あくまでグラフの一種類という扱いですが、表形式のデータと連係させたいときには便利です。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:['map','table']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Lat');
data.addColumn('number', 'Lon');
data.addColumn('string', 'Food' );
data.addRows(3);
data.setCell(0,0,34.3965603);
data.setCell(0,1,132.4596225);
data.setCell(0,2,'お好み焼き');
data.setCell(1,0,34.3401491);
data.setCell(1,1,134.0434436);
data.setCell(1,2,'うどん');
data.setCell(2,0,33.6065756);
data.setCell(2,1,130.418297);
data.setCell(2,2,'とんこつ');
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, { showTip: true, mapType:'normal' });
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, allowHtml: true });
google.visualization.events.addListener(table, 'select', function() { map.setSelection(table.getSelection()); });
google.visualization.events.addListener(map, 'select', function() { table.setSelection(map.getSelection()); });
}
</script>
<div id="map_div" style="width: 280px; height: 240px"></div>
<div id="table_div" style="width: 280px;"></div>
緯度と経度は必要ない（殆どの場合そうでしょうが）という場合、
data.setCell(0,0,'香川'); data.setCell(0,1,'うどん');
のように、直接地名を指定することも出来ます。……が、今のところかなり遅く、特に項目が10個以上になると数秒から数十秒かかります。というわけで、緯度、経度を指定する方が無難でしょう。
