［み］鯖江市がいろんなデータをxmlで提供してるから「さばえ避難所マップ」をつくってみた

久しぶりにGoogleMapsAPIをさわりました。みはら（@masashi_385）です。本当に久しぶりで、いろいろ忘れてました。

さて、鯖江市がいろんなデータをxml形式で提供してることが話題になってますね。

中日新聞:鯖江市が行政データ「ＸＭＬ」形式で提供　全国初、加工可能に:福井(CHUNICHI Web)

鯖江市で提供しているデータ

けっこういろんなデータが提供されています。

市内公園等のトイレ情報
鯖江百景の位置情報等
災害時の避難所の位置情報
市内のAED情報
避難所、一時避難所等
鯖江市の施設
市内のwifiの設置場所
さばえ検定100問
人口、気温
さばかん情報
公式ホームページのRSS
gsample
市営駐車場情報
議員名簿
鯖江市文化財
西山動物園の動物
ツツジバスのバス停
提案型市民主役募集事業一覧
古地図データ（鯖江地区)
さばえ街なかぶらりMAP（地図オープンデータ）
オープンデータ一覧
道路工事情報
イベント情報
消火栓等の情報

via：福井県鯖江市＞データシティ鯖江（XML,RDFによるオープンデータ化の推進）

ほんとにいろいろありますね。さばえ検定とかかなり地方都市っぽいカンジでいいですね。ほとんどのものがxml・RDF両方の形式で提供されていますが、xmlだけのものもあります。

さばえ避難所マップをつくる

このたくさんのデータの中から、パッと思いついたのが「避難所マップ」でした。各自治体でハザードマップ・避難所マップはつくってはいると思うのですが、Googleマップ上で閲覧できるものって少ないんじゃないでしょうか？

ちなみに、山形市ではおそらく紙で配布したと思われるマップのPDFが提供されています。

山形市内の避難場所及び避難所 — 山形市役所

ということで、GoogleMapsAPIを使って、「さばえ避難所マップ」をつくりました。

さばえ避難所マップ

さばえ避難所マップの作り方

さばえ避難所マップは、避難所になるところにマーカーをつけて、クリックされたときに、そこの基本的な情報がでるっていうシンプルなものです。また、データを外部ファイルに記述することもできますが、全部1つのファイルにまとめています。つまり、けっこう重いですｗ

誰かの参考までにコードを紹介します。10コくらいしかマーカーをつけないのであれば、この方法でなんの問題もないと思います。加工・修正は面倒ですが…

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>さばえ避難所マップ</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<script>
//ここにJavaScriptを記述
</script>
</body>
</html>

こんなカンジです。まぁ、肝心なのはJavaScriptですからね。

JavaScript

肝心のJavaScriptです。

JavaScript

function attachMessage(marker, msg) {
	google.maps.event.addListener(marker, 'click', function(event) {
		new google.maps.InfoWindow({
			content: msg
		}).open(marker.getMap(), marker);
	});
}
// 位置情報と表示データの組み合わせ
var data = new Array();
data.push({position: new google.maps.LatLng(35.942551,136.186417), content : '惜陰小学校
種類 ： 避難所
住所 ： 日の出町６－３７
電話番号 ： 0778-51-2866'});
・
・
・
data.push({position: new google.maps.LatLng(35.954865,136.276616), content : '慈光保育園
種類 ： 災害時要援護者利用施設
住所 ： 西袋町６４－２５
電話番号 ： 0778-65-2044'});

//マップを表示
var myMap = new google.maps.Map(document.getElementById('map_canvas'), {
	zoom: 16,
	center: new google.maps.LatLng( 35.956749,136.183968 ),
	mapTypeId: google.maps.MapTypeId.ROADMAP
});
//マーカーを表示
for (i = 0; i

大きな流れとしては、

データを読み込む
地図を表示する
マーカーを表示する

こんなカンジです。データの件数によっては、とても汚いコードになります。このさばえ避難所マップもとっても汚いコードになってますｗ

鯖江市のデータを使用するときの注意点

提供されたデータを使用する条件が、鯖江市から提示されています。

※「データシティさばえ」のデータを使用していることをアプリケーション内に表示し、このページ（http://www.city.sabae.fukui.jp/pageview.html?id=11552）や、各データを公開しているページへリンクを張っていただければ、データは無料で自由にご利用いただけます。