家庭訪問をする際に，ゼンリンの住宅地図や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>
function dropZone_drop(e) {
e.stopPropagation();
e.preventDefault();
var mapDiv = document.getElementById("map");
var text = mapDiv.innerText;
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);
var bounds = new google.maps.LatLngBounds();
var center;
var addressList;
var reader = new FileReader();
reader.readAsText(e.dataTransfer.files[0], 'shift-jis');
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;
new google.maps.Circle({
fillColor: '#ff0000',
fillOpacity: 0,
center: center,
map: map,
radius: 4000,
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2
});
}
bounds.extend(position);
map.fitBounds(bounds);
map.setCenter(center);
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);
});
});
}
function dropZone_dragOver(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
}
function initialize() {
var dropZone = document.getElementById("map");
dropZone.addEventListener('dragover', dropZone_dragOver, false);
dropZone.addEventListener('drop', dropZone_drop, false);
}
function initialize_searchBox(map) {
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
検索
VB.NET Tips
3Dプリンター
小学校や特別支援学校でよく目にする、右のようなiPad用衝撃吸収ケースですが、落としたときなど、本体をよく守ってくれるナイスな製品です。しかし、iPadをデジカメやビデオカメラ代わりに使いたいときに、三脚に取り付けようとすると、既製のiPad用三脚固定具では、ケースを外しすかなく、ちょっと不便です。