Google Map上に学校区情報（国土数値情報）を表示する

国土数値情報サイトからダウンロードしたJPGIS形式の情報をKMLに変換して、Google Map上に表示する手順です。

今回使用したのは以下。

国土数値情報　小学校区データ

小学校区のデータをGoogle Map上にインポートします。

手順

１．JPGIS形式のデータをSHAPE形式に変換（初めからSHAPE形式のデータがダウンロードできる場合は要らない）
２．SHAPE形式のデータをKML形式に変換
３．KML形式のデータを整形
４．Google Map上に読み込み

■JPGIS形式のデータをSHAPE形式に変換

国土数値情報データ変換ツール
データ変換ツール（KsjTool）を使って、ダウンロードしたXMLファイルをSHAPE形式に変換します。
WSd000000

■SHAPE形式のデータをKML形式に変換

QGISをインストールします。
起動したら、変換したSHAPE形式のデータファイルの中からshpのファイル（今回はポリゴンデータを使いたいのでSD02.shpを使用します）をドラッグ＆ドロップします。
（空間参照系は「WGS 84」を選択）
このまますべてのデータをKMLに変換してもいいのですが、データ量が多すぎるとGoogle Mapに掲載できる制限を超えてしまうので、KMLに変換するデータを絞り込みます。
「レイヤー」→「属性テーブルのオープン」を選択。
今回はINSカラムの値が「高崎」のものだけを選択します。

WSd000001
WSd000003

必要なデータだけが選択された状態になったら、「レイヤー」→「選択部分をベクタファイルとして保存する…」をクリックしKMLファイルとして出力します。
WSd000004

■KML形式のデータを整形

一応、KMLファイルが作成できたのですが、このままでは不要な情報などが多いので整形します。
今回は、Notepad++の正規表現置換を使って手動で書き換えました。
大量に整形が必要な場合は、変換スクリプトを作った方がいいかもしれません。

整形したKMLデータのdiff
左が元データ、右が整形したデータとなります。

■Google Map上に読み込み

KMLファイルの読み込み方法は以下。

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&hl=ja"></script>
<script type="text/javascript">
  function initialize() {
    var initPos = new google.maps.LatLng(36.3219088, 139.0032936);
    var myOptions = {
      noClear : true,
      center : initPos,
      zoom : 12,
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    var kmlUrl = "http://<ホスト名>/takasaki.kml"; //KMLファイルの読み込み
    var kmlLayer = new google.maps.KmlLayer(kmlUrl, {preserveViewport:true});
    kmlLayer.setMap(map_canvas);
        
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

<html>

<head>

function initialize() {

var initPos = new google.maps.LatLng(36.3219088, 139.0032936);

var myOptions = {

noClear : true,

center : initPos,

zoom : 12,

mapTypeId : google.maps.MapTypeId.ROADMAP

};

var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var kmlUrl = "http://<ホスト名>/takasaki.kml"; //KMLファイルの読み込み

var kmlLayer = new google.maps.KmlLayer(kmlUrl, {preserveViewport:true});

kmlLayer.setMap(map_canvas);

}

</script>

</head>

</body>

</html>

example

KMLじゃなくGeoJSONを使う方法もある

QGISでSHAPE形式のデータをコンバートする際にKMLじゃなく、GeoJSONとして出力する方法もあります。
こちらの方がマップをカスタマイズするのが楽かもしれません。
Google Map上にGeoJSONデータを表示する