LoginSignup
13

More than 5 years have passed since last update.

【オープンデータ】大阪市のオープンデータ(学校・保育園)をPHPとJSでGoogle Map上にピン表示させる

Last updated at Posted at 2015-02-13

オープンデータとは?

オープンデータとは、広く開かれた利用が許可されているデータのことです。行政機関が保有する地理空間情報、防災・減災情報、調達情報、統計情報などの公共データを、利用しやすい形で公開することを指すのが一般的ですが、広義の意味では民間企業が保有する開かれたデータも含まれます。

概要

大阪市が公開しているオープンデータの中から、学校や保育園のデータを用い、Google Map上に所在地をピン配置し、吹き出しウィンドウで詳細情報が確認できるようにする。

大阪市市政 オープンデータ普及促進に関する取り組みとオープンデータ一覧
http://www.city.osaka.lg.jp/toshikeikaku/page/0000250227.html

各種データについては、CC(クリエイティブコモンズ)ライセンスにおけるCC-BYで提供されています。

PHPでCSVファイルを取得

PHPで大阪市が公開しているこちらのCSVデータを取得します。
http://www.city.osaka.lg.jp/contents/wdu090/opendata/mapnavoskdat_csv/mapnavoskdat_gakkou.csv

PHP

<?php
setlocale(LC_ALL, 'ja_JP.UTF-8');

$data = file_get_contents("http://www.city.osaka.lg.jp/contents/wdu090/opendata/mapnavoskdat_csv/mapnavoskdat_gakkou.csv");
$data = mb_convert_encoding($data, 'UTF-8');
$temp = tmpfile();
$meta = stream_get_meta_data($temp);

fwrite($temp, $data);
rewind($temp);

$file = new SplFileObject($meta['uri']);
$file->setFlags(SplFileObject::READ_CSV);

$csv = array();

foreach ($file as $line) {
    $csv[] = $line;
}

fclose($temp);
$file = null;

JSでマップに反映

取得したデータをGoogle Mapで読み込ませる為に、JSに渡します。
「JSON.parse」で一度、JSON形式に変換。

ピンと吹き出し(情報ウィンドウ)が表示できるようにする。

吹き出しに出力したデータ
・名称
・住所
・電話番号
・サイトURL

http://maps.google.com/maps/api/js」
GoogleMapsAPIを前もって読み込んでおく

JS

var currentInfoWindow = null;

window.onload =function () {

    var dat = JSON.parse('<?=json_encode($csv);?>');

    var myOptions = {
        zoom: 16,
        center: new google.maps.LatLng(34.61831244,135.5202968),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    for(var i = 0; i < markers.length; i++) {
        var name = markers[i][2];
        var url = markers[i][11];
        var address = markers[i][5];
        var tel = markers[i][7];
        var latlng = new google.maps.LatLng(markers[i][1],markers[i][0]);
        createMarker(latlng,name,url,address,tel,map)
    }

    function createMarker(latlng,name,url,address,tel,map){

        var infoWindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({position: latlng,map: map});


        google.maps.event.addListener(marker, 'click', function() {

            if (currentInfoWindow) {
                currentInfoWindow.close();
            }

            var info = "<h4>"+name+"</h4>"+address+"<br/>"+tel+"<br/><p><a href="+url+">"+url+"</p>";
            infoWindow.setContent(info);
            infoWindow.open(map,marker);
            currentInfoWindow = infoWindow;

        });
        return marker;
    }
}


サンプル

ピンが配置され、クリックで情報が閲覧できます。

スクリーンショット 2015-02-13 16.31.11.png

ピンを置いてはじめてわかったことですが、大阪市が管轄してるのに、所在地が大阪市内じゃない学校がいくつかあるんですね。

スクリーンショット 2015-02-13 16.53.29.png

発展

これはあくまで基本型です。他のデータとドッキングしたり、検索や絞り込み等、様々なことが可能になります。
活用シーンとしては、例えば、不動産サイトなどに活用できます。特にファミリー層にとっては物件の近くに学校や保育園があるのかというのは、かなり重要なポイント。視覚的に地図上に正確な情報を載せれれば、ユーザー体験の向上につながるでしょう。
そこで得られる情報は、自治体が出しているということもあって、やはり信頼性は高く、正確だと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13