なんちゃって☆めも >> なんちゃって☆GIS

なんちゃって☆GIS :: 描画！

描画！

ここまでくれば準備完了。いよいよ描画しましょう。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="geomap.css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"><!--
google.load("visualization", "1", {"packages": ["geomap"]});
google.setOnLoadCallback(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn("string", "都道府県");
  dataTable.addColumn("number", "平均気温 (℃)");
  dataTable.addRow(["北海道", 9.5]);
  dataTable.addRow(["青森", 10.7]);
  dataTable.addRow(["岩手", 10.6]);
  // 略
  dataTable.addRow(["沖縄", 23.4]);

  var options = {};
  options["region"] = "JP";
  options["width"] = 640;
  options["height"] = 480;
  options["colors"] = [0xFFEEEE,0xFF0000];

  var map = new google.visualization.GeoMap(document.getElementById("map");
  map.draw(dataTable, options);
});
//--></script>
<title>ここにタイトルを入れてね</title>
</head>
<body>
<div id="map"></div>
</body>
</html>
イベントのハンドルとかしなければ、後半はこんな感じに短縮できます。
 new google.visualization.GeoMap(document.getElementById("map")).draw(dataTable, {
  region: "JP",
  width: 640,
  height: 480,
  colors: [0xFFEEEE,0xFF0000]
 });