YAS's VB.NET Tips
 
for School
学校向け >> 記事詳細

2018/06/10

家庭訪問支援GoogleMaps

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


 下のようなCSVを用意します。1行目に[家庭訪問支援]と記入し,2行目から,訪問先の名前,住所と記入していきます。最後の行には改行を入れないでください。
[家庭訪問支援]
飯高特別支援学校,匝瑳市飯高1692
飯高寺,匝瑳市飯高1789
校門桜,匝瑳市小高268
安久山のスダジイ,匝瑳市安久山197
ふれあいパーク八日市場,匝瑳市飯塚299-2
松山庭園美術館,匝瑳市松山630
香取市立山倉小学校,取市山倉672
多古町立常磐小学校,香取郡多古町南玉造162
多古町立中村小学校,香取郡多古町南中349-2
匝瑳市立豊和小学校,匝瑳市大寺1492
匝瑳市立吉田小学校,匝瑳市吉田4020
ひかり学園,香取郡多古町北中1309-160
第2ひかり学園,香取郡多古町北中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 {
    
height100%;
    
text-aligncenter;
    
line-height300px;
    
font-weightbolder;
  }
  
html,body {
    
height:100%;
    
margin0;
    
padding:0;
  }
  
.gm-style-iw {margin-left0pxmargin-top:2px;}
  
.gm-style-iw + div {displaynone;}
  
.searchBox {
    
background-color'#00fff';
    
font-size15px;
    
font-weight300;
    
margin-top10px;
    
margin-left12px;
    
padding0 11px 0 13px;
    
text-overflowellipsis;
    
width300px;
    
height29px;
    
border1px solid transparent;
    
border-radius2px 0 0 2px;
    
box-sizingborder-box;
    
box-shadow0 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" +
              
"1行目に'[家庭訪問支援]'と記入してください。");
        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&amp;Dropしてください</div>
</body>
</html>

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


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