【JavaScript実践】 Google Map上に大阪市内の保育所を表示する

この記事では以下の画面を作成する。

f:id:kosumoro:20161009131344j:plain

https://cosmology233.github.io/sandbox/hatena/2016/10/08/

Google Maps APIを利用してページに大阪市内の保育所を表示する。

必要なデータは大阪市のオープンデータを利用する。

大阪市市政 マップナビおおさかオープンデータ一覧

csvファイルを直接参照できればよいが、httpsに対応していないようなのでデータをダウンロードして使用する。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <title>Practice JavaScript</title>
  <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
  <div id="gmap" class="gmap"></div>

  <script src="./scripts/script.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyBAVKOgsqfbsINYt2qjoLMziacVp6N8zBY&callback=initMap"></script>
</body>
</html>

data/schools.csv

https://github.com/cosmology233/sandbox/blob/gh-pages/hatena/2016/10/08/data/schools.csv

Githubcsvファイルをアップロードすると自動的にテーブルで表示してくれるようだ。

styles/style.css

body {
  padding: 0; margin: 0;
}

.gmap {
  width: 100%; height: 100vh;
}

scripts/script.js

alert("データは大阪市(http://www.city.osaka.lg.jp/toshikeikaku/page/0000250227.html#mapnavi)のものです。");

function initMap() {
  var container = document.getElementById("gmap");
  var map = new google.maps.Map(container);
  
  map.setOptions({
    "zoom": 13,
    "center": {
      "lat": 34.702,
      "lng": 135.495
    }
  });
  
  getSchoolsData("./data/schools.csv", function(data) {
    data.forEach(function(datum) {
      var marker = new google.maps.Marker();
      var infoWindow = new google.maps.InfoWindow();
      
      if(datum.category != "保育所") {
        return false;
      }
      
      marker.setOptions({
        "map": map,
        "position": datum.coords
      });
      
      infoWindow.setOptions({
        "content": "" + 
            "<p>" +
              "<strong>" +
                "<a href=\"" + datum.url + "\">" + datum.name + "</a>" +
              "</strong>" +
              "<br>" +
              "<small>" +
                datum.address +
              "</small>" +
            "</p>"
      });

      marker.addListener("click", () => {
        infoWindow.open(map, marker);
      });
    });
  });
  
  function getSchoolsData(path, callback) {
    var xhr = new XMLHttpRequest();
    var schoolsData = [];
    
    xhr.open("GET", path);
    xhr.addEventListener("load", function(ev) {
      var csvData = ev.target.response.split("\n").map(function(datum) {
        return datum.split(",");
      });
      
      csvData.forEach(function(datum, i) {
        if(i == 0) {
          return false;
        }
        
        schoolsData.push({
          "name": datum[2],
          "category": datum[16],
          "address": datum[5],
          "url": datum[11],
          "coords": {
            "lat": Number(datum[1]),
            "lng": Number(datum[0])
          }
        });
      });
      
      callback(schoolsData);
    });
    xhr.send();
  }
}