久しぶりにGoogleMapsAPIをさわりました。みはら（@masashi_385）です。本当に久しぶりで、いろいろ忘れてました。
さて、鯖江市がいろんなデータをxml形式で提供してることが話題になってますね。
鯖江市で提供しているデータ
けっこういろんなデータが提供されています。
- 市内公園等のトイレ情報
- 鯖江百景の位置情報等
- 災害時の避難所の位置情報
- 市内のAED情報
- 避難所、一時避難所等
- 鯖江市の施設
- 市内のwifiの設置場所
- さばえ検定100問
- 人口、気温
- さばかん情報
- 公式ホームページのRSS
- gsample
- 市営駐車場情報
- 議員名簿
- 鯖江市文化財
- 西山動物園の動物
- ツツジバスのバス停
- 提案型市民主役募集事業一覧
- 古地図データ（鯖江地区)
- さばえ街なかぶらりMAP（地図オープンデータ）
- オープンデータ一覧
- 道路工事情報
- イベント情報
- 消火栓等の情報
via：
ほんとにいろいろありますね。さばえ検定とかかなり地方都市っぽいカンジでいいですね。ほとんどのものが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です。
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）や、各データを公開しているページへリンクを張っていただければ、データは無料で自由にご利用いただけます。
ということで、さばえ避難所マップでも「powered by データシティさばえ」と表示しています。
