家庭訪問支援GoogleMaps - YAS's VB.NET Tips

学校向け　>>　記事詳細

2018/06/10	家庭訪問支援GoogleMaps	\| by:YAS

　家庭訪問をする際に，ゼンリンの住宅地図やGoogleマップで訪問する家を探すのですが，結構時間がかかります。そこで，Googleマップに簡単に訪問先の目印をつける方法を考えてみました。下の動画のように，訪問先の名前と住所をCSVで用意し，ブラウザにドラッグ＆ドロップするだけで，自動的に目印が作られます。また，目安として半径4kmの円を表示したり，印刷すると薄くて見にくいGoogleマップの道路の濃い色に変えて表示したりします。
　

　下のようなCSVを用意します。１行目に[家庭訪問支援]と記入し，２行目から，訪問先の名前，住所と記入していきます。最後の行には改行を入れないでください。

[家庭訪問支援]
飯高特別支援学校,匝瑳市飯高1692
飯高寺,匝瑳市飯高1789
校門桜,匝瑳市小高268
安久山のスダジイ,匝瑳市安久山197
ふれあいパーク八日市場,匝瑳市飯塚299-2
松山庭園美術館,匝瑳市松山630
香取市立山倉小学校,取市山倉672
多古町立常磐小学校,香取郡多古町南玉造162
多古町立中村小学校,香取郡多古町南中349-2
匝瑳市立豊和小学校,匝瑳市大寺1492
匝瑳市立吉田小学校,匝瑳市吉田4020
ひかり学園,香取郡多古町北中1309-160
第２ひかり学園,香取郡多古町北中1269

　下のHtmlをメモ帳にコピー・貼り付けして，「GoogleMaps.html」のような名前を付けて保存してください。GoogleMapsAPIのKeyを取得して，「xxxxxx～」のところに記入してください。
　ダブルクリックして，ブラウザに読み込ませ，「ここにCSVファイルをDrag&Dropしてください。」と表示されたら，上のCSVファイルをドラック＆ドロップしてください。

<!DOCTYPE html>
<html>
<head>
<title>GoogleMap</title>
<meta name="viewport" content="initial-scale=1.0" />
<style>
  #map {
    height: 100%;
    text-align: center;
    line-height: 300px;
    font-weight: bolder;
  }
  html,body {
    height:100%;
    margin: 0;
    padding:0;
  }
  .gm-style-iw {margin-left: 0px; margin-top:2px;}
  .gm-style-iw + div {display: none;}
  .searchBox {
    background-color: '#00fff';
    font-size: 15px;
    font-weight: 300;
    margin-top: 10px;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
    height: 29px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&libraries=places"></script>
<script>
  //Dropイベント
  function dropZone_drop(e) {
    e.stopPropagation();
    e.preventDefault();
    var mapDiv = document.getElementById("map");
    var text = mapDiv.innerText;
    //MapTypeを定義し，道路の色を変更する
    var styledMapType = new google.maps.StyledMapType([
      {
        featureType: 'road',
        elementType: 'geometry',
        stylers: [{color: '#C0C0C0'}]
      },{
        featureType: 'road.highway',
        elementType: 'geometry',
        stylers: [{color: '#FF0000'}]
      },{
        featureType: 'road.arterial',
        elementType: 'geometry',
        stylers: [{color: '#FFA500'}]
      },{
        featureType: 'road.local',
        elementType: 'geometry',
        stylers: [{color: '#C0C0C0'}]
      },{
        featureType: 'administrative.locality',
        elementType: 'geometry',
        stylers: [{color: '#0000FF'}]
      }
    ],{name: '道路強調'});
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 16,
      mapTypeControlOptions: {
        mapTypeIds: ['roadmap', 'satellite', '道路強調']
      }
    });
    map.mapTypes.set('道路強調', styledMapType);
    map.setMapTypeId('道路強調');
    //検索ボックスを初期化する
    initialize_searchBox(map);
    //CSVを読み込み，InfoWindowで表示する
    var bounds = new google.maps.LatLngBounds();
    var center;
    var addressList;
    var reader = new FileReader();
    reader.readAsText(e.dataTransfer.files[0], 'shift-jis');
    //geocoderで住所から座標を取得し，InfoWindowでマップ上に表示する
    reader.addEventListener('load', function() {
      addressList = reader.result.split('\n');
      if (addressList[0] == '[家庭訪問支援]\r') {
        addressList.shift();
      } else {
        alert("住所一覧をドロップしてください。\n" +
              "１行目に'[家庭訪問支援]'と記入してください。");
        mapDiv.innerText=text;
        return;
      }
      addressList.forEach(function(address) {
        var location = address.split(',');
        var geocoder = new google.maps.Geocoder();
        var timerID = setInterval( function() {
          geocoder.geocode( { 'address': location[1] }, function(results, status) {
            if (status=='OK') {
              var position = results[0].geometry.location;
              if (center == null) {
                center = position;
                //中心から半径4000メートルの円を描く
                new google.maps.Circle({
                  fillColor: '#ff0000',
                  fillOpacity: 0,
                  center: center,
                  map: map,
                  radius: 4000,
                  strokeColor: '#ff0000',
                  strokeOpacity: 0.8,
                  strokeWeight: 2
                });
              }
              //表示領域にInfoWindowが入るように拡張する
              bounds.extend(position);
              map.fitBounds(bounds);
              map.setCenter(center);
              //InfoWindowを表示する
              var info = new google.maps.InfoWindow( {
                position:  position,
                content: '<div style="font-weight: bold;">' + location[0] + '</div>'
              });
              info.open(map);
              clearInterval(timerID);
            } else if (status != 'OVER_QUERY_LIMIT') {
              //使用制限以外のエラーが発生したらスキップする
              alert("使用制限以外のエラーが発生したのでスキップします。\n" +
                    "Status:" + status +"\n" +
                    location[0] + " " + location[1]);
              clearInterval(timerID);
            }
          });
        }, 3000);
      });
    });
  }

  //Dragイベント
  function dropZone_dragOver(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
  }

  //初期化（Drag & Dropのイベントを設定する）
  function initialize() {
    var dropZone  = document.getElementById("map");
    dropZone.addEventListener('dragover', dropZone_dragOver, false);
    dropZone.addEventListener('drop', dropZone_drop, false);
  }

  //検索ボックスを初期化する
  function initialize_searchBox(map) {
    //searchBoxを作成・追加する
    var input = document.createElement("input");
    input.className="searchBox"
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    //サーチボックスの検索領域をマップのビューポートに設定する
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });
    var markers = [];
    searchBox.addListener('places_changed', function() {
      var places = searchBox.getPlaces();
      if (places.length == 0) {
        return;
      }
      //現在のマーカーを消去する
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];
      //検索結果のマーカーを表示する
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          return;
        }
        markers.push(new google.maps.Marker({
          map: map,
          title: place.name,
          position: place.geometry.location
        }));
        if (place.geometry.viewport) {
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
  }
</script>
</head>
<body onload="initialize()">
  <div id="map" >ここにCSVファイルをDrag&Dropしてください</div>
</body>
</html>

　下の「お試しマップ」のリンクから，試していただけます。ただ，APIの無料使用制限に達してしまうため，お試し程度にとどめてください。
　お試しマップ

参考
・GoogleMapsAPI マーカー
・【Google Maps JavaScript API v3】すべてのマーカーを地図の中に収める【LatLngBounds】
・GoogleMapsAPI Places search box

07:30

< 前の記事へ次の記事へ >一覧へ戻る