MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2017.10.21

Google Charts を利用して日本地図を色塗りしてみる

GeoChart

みなさん、こんにちは。

今回は、Google Charts の GeoChart を利用して、日本地図を都道府県単位で色塗りしてみたいと思います。

 

Google Charts とは、Google が提供するグラフを描画するツールです。非常にたくさんのグラフを作成できるのですが、その中に地図に関するグラフがあります。

詳細は、下記のページをご覧ください。

https://developers.google.com/chart/

 

では早速コードを書いていきましょう。

まず、Google Chart の js ファイルをロードします。

<script src="https://www.gstatic.com/charts/loader.js" ></script>

 

GeoChart を利用できるようパッケージをロードします。

google.charts.load('current', {
	'packages':['geochart']
});
google.charts.setOnLoadCallback(drawMap);

 

GeoChart を描画する関数です。指定するデータは、都道府県名と数値になりますが、都道府県名に都や県、府が含まれると上手くいきません。。。

function drawMap() {
	//都道府県単位のデータ
	var data = [
	    ["都道府県","回数"],
	    ["北海道", 5],
	    ["青森",   2],
	    ["秋田",   0],
	    ["岩手",   1],
	     :
	];
	var dt = google.visualization.arrayToDataTable(data);
	var options = {
		region: 'JP',  //地域
		displayMode: 'regions', // regions=塗りつぶし, markers=マーカー 
		backgroundColor: '#ebf7fe', //背景色
		resolution: 'provinces',
		colors:['white','green'] //階層の色
	};
	//出力するDivを指定して chart を生成
	var chart = new google.visualization.GeoChart(document.getElementById('region-div'));
	//描画
	chart.draw(dt, options);
}

 

以下がサンプルです。こちらのデータは、2017年10月20日現在、ブラタモリでタモリさんが訪問した都道府県の回数となっています。色が塗られていないところが、まだ訪問していない都道府県になります。大分少なくなりました。地図上にマウスカーソルを合わせると、都道府県名と回数が表示されます。

 

displayMode を “markers” に設定すると、塗り潰しではなくマーカでの描画になります。

displayMode: 'markers'

 

 

いかがでした?

こんなに簡単に作成できるとは、自分も思っていなかったのでビックリです。

今回作成したグラフは、Google Analytics でも使われており、Google系のサイトではよく見るものですね。また、地図以外にも色々なグラフを簡単に作れると思いますので、みなさんもご利用ください。

 

余談ですが、弊社では ブラタモリマップ を作成し、Googleマップ上で訪問した場所を参照できるようにしています。ご興味のある方は、是非ご覧ください。

 

 

 

【関連記事】こんな記事も読まれています

2017.02.26

Wi-Fi マックアドレスから位置取得

みなさん、こんにちは。

Google Maps API には様々なAPIがありますが、その中の「続きを読む

2017.05.19

Googleマップに同心円を描画する

みなさん、こんにちは。

Googleマップ上に同心円を書きたいと思ったことはありませんか? 私は、よくあります。

マルティスープで・・・

続きを読む

2017.07.02

Googleマップに色々なマーカーを描画する方法

みなさん、こんにちは!

今回は、 Google マップ上に色々なマーカーを描画する方法を説明したいと思います。

 

続きを読む

 - スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)