地価調査データ取得サンプル (Google Maps)
Posted on: 2016-01-02 /
Categories: API, Pacenotes Hub
・内容
国土交通省国土政策局国土情報課より提供されている都道府県地価調査データ（大阪府のみ）をPacenotes Hub (サーバ)より取得し、Google Mapsに展開します。
・サンプルプログラムのダウンロード
GitHubよりダウンロードしてください。
map_information.htmlを使用します。
・画面
map_information.htmlを自分のサーバにアップロードするか、デモサイト を使用して開いてください。
「get」ボタンを押すとデータを受信して地図に反映します。
マークをクリックすると地価調査データが表示されます。
・コードの説明
|
1 2 |
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> |
Google MapsとJQueryのスクリプトを読み込みます。
※今回はデモのためGoogle Mapsのコードは指定していません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var locData = new Array(); var objInformation = {}; var googleMap = null; function attachInformation(marker, code, content) { google.maps.event.addListener(marker, 'click', function(event) { if (objInformation[code] == undefined || objInformation[code] == null) { var info = new google.maps.InfoWindow({ content: content }); info.open(marker.getMap(), marker); objInformation[code] = info; } }); } function initialize() { googleMap = new google.maps.Map(document.getElementById('mapCanvas'), { zoom: 14, center: new google.maps.LatLng(34.6872, 135.5258), scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); } |
Google Mapsを初期化し、マーカに情報パネルを追加する処理です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
$(function(){ function getBoolean(flag) { if (flag) return 'あり'; return 'なし'; } $('#button1').click(function(){ $.ajax({ url: "http://api.pacenotescloud.com/api/get_information", type: "POST", dataType: "json", cache: false, data: {'collection':'l02' , 'query': '{}', 'fields': '{"code1":1, "year":1, "price":1, "attr1":1, "attr1":1, "attr2":1, "attr3":1, "attr4":1, "attr5":1, "attr6":1, "attr7":1, "attr8":1, "code6":1, "name":1, "address":1, "dimension":1, "type1":1, "type2":1, "water":1, "gas":1, "sewage":1, "station":1, "distance":1, "loc":1, "data1":1, "data2":1, "data3":1, "data4":1, "data5":1, "data6":1, "data7":1, "data8":1, "data9":1, "data10":1, "data11":1, "data12":1, "data13":1, "data14":1, "data15":1, "data16":1, "data17":1, "data18":1, "data19":1}'} }).done(function(data, textStatus) { for (i = 0; i < locData.length; i++) { var current = locData[i]; var marker = current.marker; marker.setMap(null); objInformation[current.code] = null; } var record = data.response; for (var i=0; i<record.length; i++) { var current = record[i]; var marker = new google.maps.Marker({ position: new google.maps.LatLng(current.loc[1], current.loc[0]), map: googleMap }); var content = current.address + '<br />' + current.price.toLocaleString() + '円/㎡ [' + current.type1 + '/' + current.type2 + '(地積:' + current.dimension.toLocaleString() + '㎡)' + ']' + '<br />法規制:' + current.data13 + ' 建ぺい率:' + current.data14 + '% 容積率:' + current.data15 + '%' + '<br />前面道路:' + current.data6 + ' 方位:' + current.data7 + ' 幅員:' + current.data8 + 'ｍ' + '<br />水道:' + getBoolean(current.water) + ' ガス:' + getBoolean(current.gas) + ' 下水:' + getBoolean(current.sewage) + '<br />最寄駅:' + current.station + '(' + current.distance.toLocaleString() + 'ｍ)' + '<br />' + '(' + current.year + '年)'; attachInformation(marker, current.code1, content); locData.push({code: current.code1, marker: marker, content: content}); } }).fail(function(xhr, textStatus, errorThrown) { window.alert( "read data error" ) ; }); }); }); |
JQueryを使用して「get」ボタンをクリックした時にサーバにAjaxでアクセスし、取得したデータでマーカを作成しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body onload="initialize()"> <p>Map sample</p> <div id="mapCanvas" style="width:100%; height:768px"></div> <div style="width:100%; height:200px"> <p> <button id="button1">get</button> </p> </div> </body> |
HTMLのbodyが読み込まれた時にJavaScriptのinitialize()関数が実行するように指定しています。
・APIの仕様
APIの仕様はこちらを参照してください。
・データ元
※データは2014年のもので、大阪府のみサーバに登録しています。