メニュー

E-Mail
ASP.Netのお勉強
VB.Netのお勉強
Excel マクロ・VBAのお勉強
PHPのお勉強
Webデザインのお勉強
Javaのお勉強
総合サイトCocoaLiz
ネイルサロン検索
エステサロン検索
アロマサロン検索
アイビューティーサロン検索

Google Visualization APIのGeoMap

Google Visualization APIにあるGeoMapを利用します。
地図に色付けをすることが可能です。

日本地図を表示して、当道府県別に面積により色付けを行います。

Visualizationで用意されているDataTableを用いて、
都道府県名と面積をセットします。

DataTableの一列目は、英語かISO-3166のコードをセットします。
CityCodeを参照。

二列目は、面積をセットし、三列目は日本語の都道府県名をセットします。
三列目にセットした名称は、地図でフォーカス時に表示されます。

GeoMapを作成する際に、オプションでregionにJPを指定します。
日本地図を中心に表示される様になります。

DataTableとオプションを渡して、日本地図を色付けで表示します。

作ったサンプルサイトは、こちらです。

コードは、下記。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

    google.load("visualization", "1", {packages: ["geomap"]});

    function drawGeoMap() {

        var data = new google.visualization.DataTable();
        
        data.addRows(47);
        
        data.addColumn("string", "都道府県名(英語表記)");
        data.addColumn("number", "面積(100k㎡)");
        data.addColumn("string", "都道府県名");
        
        data.addRow(["Hokkaido",834.57,"北海道"]);
        data.addRow(["Aomori",96.44,"青森県"]);
        data.addRow(["Iwate",152.79,"岩手県"]);
        data.addRow(["Miyagi",72.86,"宮城県"]);
        data.addRow(["Akita",116.36,"秋田県"]);
        data.addRow(["Yamagata",93.23,"山形県"]);
        data.addRow(["Fukushima",137.83,"福島県"]);
        data.addRow(["Ibaraki",60.96,"茨城県"]);
        data.addRow(["Tochigi",64.08,"栃木県"]);
        data.addRow(["Gunma",63.63,"群馬県"]);
        data.addRow(["Saitama",37.97,"埼玉県"]);
        data.addRow(["Chiba",51.57,"千葉県"]);
        data.addRow(["Tokyo",21.88,"東京都"]);
        data.addRow(["Kanagawa",24.16,"神奈川県"]);
        data.addRow(["Niigata",125.84,"新潟県"]);
        data.addRow(["Toyama",42.48,"富山県"]);
        data.addRow(["Ishikawa",41.86,"石川県"]);
        data.addRow(["Fukui",41.90,"福井県"]);
        data.addRow(["Yamanashi",44.65,"山梨県"]);
        data.addRow(["Nagano",135.62,"長野県"]);
        data.addRow(["Gifu",106.21,"岐阜県"]);
        data.addRow(["Shizuoka",77.80,"静岡県"]);
        data.addRow(["Aichi",51.65,"愛知県"]);
        data.addRow(["Mie",57.77,"三重県"]);
        data.addRow(["Shiga",40.17,"滋賀県"]);
        data.addRow(["Kyoto",46.13,"京都府"]);
        data.addRow(["Osaka",18.98,"大阪府"]);
        data.addRow(["Hyogo",83.96,"兵庫県"]);
        data.addRow(["Nara",36.91,"奈良県"]);
        data.addRow(["Wakayama",47.26,"和歌山県"]);
        data.addRow(["Tottori",35.07,"鳥取県"]);
        data.addRow(["Shimane",67.08,"島根県"]);
        data.addRow(["Okayama",71.13,"岡山県"]);
        data.addRow(["Hiroshima",84.79,"広島県"]);
        data.addRow(["Yamaguchi",61.14,"山口県"]);
        data.addRow(["Tokushima",41.47,"徳島県"]);
        data.addRow(["Kagawa",18.77,"香川県"]);
        data.addRow(["Ehime",56.78,"愛媛県"]);
        data.addRow(["Kochi",71.05,"高知県"]);
        data.addRow(["Fukuoka",49.77,"福岡県"]);
        data.addRow(["Saga",24.40,"佐賀県"]);
        data.addRow(["Nagasaki",41.05,"長崎県"]);
        data.addRow(["Kumamoto",74.06,"熊本県"]);
        data.addRow(["Oita",63.40,"大分県"]);
        data.addRow(["Miyazaki",77.35,"宮崎県"]);
        data.addRow(["Kagoshima",91.89,"鹿児島県"]);
        data.addRow(["Okinawa",22.76,"沖縄県"]);
        

        var options = {};
        options['dataMode'] = 'regions';
        options['region'] = "JP";

        var container = document.getElementById("geomap");
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
    }

    google.setOnLoadCallback(drawGeoMap);

</script>
</head>
<body>
<div id="geomap" style="width: 800px; height: 400px;"></div>
</body>
</html>



Copyright (C) 総合サイトCocoaLiz. All Rights Reserved.