市区町選択フォームの作成と市区町役場の表示
市区町のドロップダウンメニューを、HTMLの選択要素<select>を使って、<option>要素で定義される市区町選択肢を表示する。
市区町選択フォーム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hyogo Reservoir 2021 Gmap</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" href="./style-practical-01.css">
<script src="./index-base-04.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
<select id="munic" onchange="selectchanged(this.value);">
<option value="">市区町</option>
<option value="神戸市">神戸市</option>
<option value="神戸市須磨区">神戸市須磨区</option>
<option value="神戸市垂水区">神戸市垂水区</option>
<option value="神戸市北区">神戸市北区</option>
<option value="神戸市西区">神戸市西区</option>
<option value="尼崎市">尼崎市</option>
<option value="西宮市">西宮市</option>
<option value="伊丹市">伊丹市</option>
<option value="宝塚市">宝塚市</option>
<option value="川西市">川西市</option>
<option value="三田市">三田市</option>
<option value="川辺郡猪名川町">川辺郡猪名川町</option>
<option value="明石市">明石市</option>
<option value="加古川市">加古川市</option>
<option value="高砂市">高砂市</option>
<option value="加古郡稲美町">加古郡稲美町</option>
<option value="加古郡播磨町">加古郡播磨町</option>
<option value="西脇市">西脇市</option>
<option value="三木市">三木市</option>
<option value="小野市">小野市</option>
<option value="加西市">加西市</option>
<option value="加東市">加東市</option>
<option value="多可郡多可町">多可郡多可町</option>
<option value="姫路市">姫路市</option>
<option value="神崎郡市川町">神崎郡市川町</option>
<option value="神崎郡福崎町">神崎郡福崎町</option>
<option value="神崎郡神河町">神崎郡神河町</option>
<option value="相生市">相生市</option>
<option value="赤穂市">赤穂市</option>
<option value="たつの市">たつの市</option>
<option value="揖保郡太子町">揖保郡太子町</option>
<option value="宍粟市">宍粟市</option>
<option value="赤穂郡上郡町">赤穂郡上郡町</option>
<option value="佐用郡佐用町">佐用郡佐用町</option>
<option value="豊岡市">豊岡市</option>
<option value="美方郡香美町">美方郡香美町</option>
<option value="美方郡新温泉町">美方郡新温泉町</option>
<option value="養父市">養父市</option>
<option value="朝来市">朝来市</option>
<option value="丹波篠山市">丹波篠山市</option>
<option value="丹波市">丹波市</option>
<option value="洲本市">洲本市</option>
<option value="南あわじ市">南あわじ市</option>
<option value="淡路市">淡路市</option>
</select>
</div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key&callback=initMap&libraries=places&v=weekly"></script>
</body>
</html>HTMLの63行目のYour_API_Keyに、Google Maps Platformで取得したAPIキーを代入すると、上図の表示ができる。
市区町役場データ（GeoJSON）
市区庁舎の位置情報は、国土数値情報ダウンロードサービスの市区町村役場データで得たシェープファイルで、これをQGISで編集しGeoJson形式に変換した。（小野市役所移転更新済み）
{
"type": "FeatureCollection",
"name": "P34-14_2801",
"features": [
{ "type": "Feature", "properties": { "P34_001": "28100", "P34_002": "1", "P34_003": "神戸市役所", "P34_004": "神戸市中央区加納町6-5-1" }, "geometry": { "type": "Point", "coordinates": [ 135.195728, 34.689495 ] } },
{ "type": "Feature", "properties": { "P34_001": "28101", "P34_002": "1", "P34_003": "神戸市東灘区役所", "P34_004": "神戸市東灘区住吉東町5-2-1" }, "geometry": { "type": "Point", "coordinates": [ 135.265429, 34.720159 ] } },
{ "type": "Feature", "properties": { "P34_001": "28102", "P34_002": "1", "P34_003": "神戸市灘区役所", "P34_004": "神戸市灘区桜口町4-2-1" }, "geometry": { "type": "Point", "coordinates": [ 135.239571, 34.712356 ] } },
{ "type": "Feature", "properties": { "P34_001": "28105", "P34_002": "1", "P34_003": "神戸市兵庫区役所", "P34_004": "神戸市兵庫区荒田町1-21-1" }, "geometry": { "type": "Point", "coordinates": [ 135.165383, 34.680584 ] } },
{ "type": "Feature", "properties": { "P34_001": "28106", "P34_002": "1", "P34_003": "神戸市長田区役所", "P34_004": "神戸市長田区北町3-4-3" }, "geometry": { "type": "Point", "coordinates": [ 135.150854, 34.665686 ] } },
{ "type": "Feature", "properties": { "P34_001": "28107", "P34_002": "1", "P34_003": "神戸市須磨区役所", "P34_004": "神戸市須磨区大黒町4-1-1" }, "geometry": { "type": "Point", "coordinates": [ 135.133702, 34.658634 ] } },
{ "type": "Feature", "properties": { "P34_001": "28108", "P34_002": "1", "P34_003": "神戸市垂水区役所", "P34_004": "神戸市垂水区日向1-5-1" }, "geometry": { "type": "Point", "coordinates": [ 135.056919, 34.63061 ] } },
{ "type": "Feature", "properties": { "P34_001": "28109", "P34_002": "1", "P34_003": "神戸市北区役所", "P34_004": "神戸市北区鈴蘭台西町1-25-1" }, "geometry": { "type": "Point", "coordinates": [ 135.144387, 34.727256 ] } },
{ "type": "Feature", "properties": { "P34_001": "28110", "P34_002": "1", "P34_003": "神戸市中央区役所", "P34_004": "神戸市中央区雲井通5-1-1" }, "geometry": { "type": "Point", "coordinates": [ 135.197794, 34.695074 ] } },
{ "type": "Feature", "properties": { "P34_001": "28111", "P34_002": "1", "P34_003": "神戸市西区役所", "P34_004": "神戸市西区玉津町小山字川端180-3" }, "geometry": { "type": "Point", "coordinates": [ 134.981654, 34.68325 ] } },
{ "type": "Feature", "properties": { "P34_001": "28201", "P34_002": "1", "P34_003": "姫路市役所", "P34_004": "姫路市安田4-1" }, "geometry": { "type": "Point", "coordinates": [ 134.685458, 34.815496 ] } },
{ "type": "Feature", "properties": { "P34_001": "28202", "P34_002": "1", "P34_003": "尼崎市役所", "P34_004": "尼崎市東七松町1-23-1" }, "geometry": { "type": "Point", "coordinates": [ 135.406394, 34.733554 ] } },
{ "type": "Feature", "properties": { "P34_001": "28203", "P34_002": "1", "P34_003": "明石市役所", "P34_004": "明石市中崎1-5-1" }, "geometry": { "type": "Point", "coordinates": [ 134.997182, 34.643109 ] } },
{ "type": "Feature", "properties": { "P34_001": "28204", "P34_002": "1", "P34_003": "西宮市役所", "P34_004": "西宮市六湛寺町10-3" }, "geometry": { "type": "Point", "coordinates": [ 135.34183, 34.737691 ] } },
{ "type": "Feature", "properties": { "P34_001": "28205", "P34_002": "1", "P34_003": "洲本市役所", "P34_004": "洲本市本町3-4-10" }, "geometry": { "type": "Point", "coordinates": [ 134.895653, 34.342522 ] } },
{ "type": "Feature", "properties": { "P34_001": "28206", "P34_002": "1", "P34_003": "芦屋市役所", "P34_004": "芦屋市精道町7-6" }, "geometry": { "type": "Point", "coordinates": [ 135.304179, 34.726522 ] } },
{ "type": "Feature", "properties": { "P34_001": "28207", "P34_002": "1", "P34_003": "伊丹市役所", "P34_004": "伊丹市千僧1-1" }, "geometry": { "type": "Point", "coordinates": [ 135.400933, 34.784295 ] } },
{ "type": "Feature", "properties": { "P34_001": "28208", "P34_002": "1", "P34_003": "相生市役所", "P34_004": "相生市旭1-1-3" }, "geometry": { "type": "Point", "coordinates": [ 134.468193, 34.803662 ] } },
{ "type": "Feature", "properties": { "P34_001": "28209", "P34_002": "1", "P34_003": "豊岡市役所", "P34_004": "豊岡市中央町2-4" }, "geometry": { "type": "Point", "coordinates": [ 134.820187, 35.544475 ] } },
{ "type": "Feature", "properties": { "P34_001": "28210", "P34_002": "1", "P34_003": "加古川市役所", "P34_004": "加古川市加古川町北在家2000" }, "geometry": { "type": "Point", "coordinates": [ 134.8409, 34.75662 ] } },
{ "type": "Feature", "properties": { "P34_001": "28212", "P34_002": "1", "P34_003": "赤穂市役所", "P34_004": "赤穂市加里屋81" }, "geometry": { "type": "Point", "coordinates": [ 134.390354, 34.754974 ] } },
{ "type": "Feature", "properties": { "P34_001": "28213", "P34_002": "1", "P34_003": "西脇市役所", "P34_004": "西脇市郷瀬町605" }, "geometry": { "type": "Point", "coordinates": [ 134.969284, 34.993428 ] } },
{ "type": "Feature", "properties": { "P34_001": "28214", "P34_002": "1", "P34_003": "宝塚市役所", "P34_004": "宝塚市東洋町1-1" }, "geometry": { "type": "Point", "coordinates": [ 135.360098, 34.799817 ] } },
{ "type": "Feature", "properties": { "P34_001": "28215", "P34_002": "1", "P34_003": "三木市役所", "P34_004": "三木市上の丸町10-30" }, "geometry": { "type": "Point", "coordinates": [ 134.990188, 34.796922 ] } },
{ "type": "Feature", "properties": { "P34_001": "28216", "P34_002": "1", "P34_003": "高砂市役所", "P34_004": "高砂市荒井町千鳥1-1-1" }, "geometry": { "type": "Point", "coordinates": [ 134.790478, 34.766248 ] } },
{ "type": "Feature", "properties": { "P34_001": "28217", "P34_002": "1", "P34_003": "川西市役所", "P34_004": "川西市中央町12-1" }, "geometry": { "type": "Point", "coordinates": [ 135.417222, 34.830132 ] } },
{ "type": "Feature", "properties": { "P34_001": "28218", "P34_002": "1", "P34_003": "小野市役所", "P34_004": "小野市中島町531" }, "geometry": { "type": "Point", "coordinates": [ 134.939799, 34.857872 ] } },
{ "type": "Feature", "properties": { "P34_001": "28219", "P34_002": "1", "P34_003": "三田市役所", "P34_004": "三田市三輪2-1-1" }, "geometry": { "type": "Point", "coordinates": [ 135.22529, 34.889672 ] } },
{ "type": "Feature", "properties": { "P34_001": "28220", "P34_002": "1", "P34_003": "加西市役所", "P34_004": "加西市北条町横尾1000" }, "geometry": { "type": "Point", "coordinates": [ 134.841819, 34.927811 ] } },
{ "type": "Feature", "properties": { "P34_001": "28221", "P34_002": "1", "P34_003": "篠山市役所", "P34_004": "篠山市北新町41" }, "geometry": { "type": "Point", "coordinates": [ 135.219002, 35.075673 ] } },
{ "type": "Feature", "properties": { "P34_001": "28222", "P34_002": "1", "P34_003": "養父市役所", "P34_004": "養父市八鹿町八鹿1675" }, "geometry": { "type": "Point", "coordinates": [ 134.767668, 35.40464 ] } },
{ "type": "Feature", "properties": { "P34_001": "28223", "P34_002": "1", "P34_003": "丹波市役所", "P34_004": "丹波市氷上町成松甲賀1" }, "geometry": { "type": "Point", "coordinates": [ 135.035816, 35.177259 ] } },
{ "type": "Feature", "properties": { "P34_001": "28224", "P34_002": "1", "P34_003": "南あわじ市役所", "P34_004": "南あわじ市市善光寺18-27" }, "geometry": { "type": "Point", "coordinates": [ 134.779083, 34.295807 ] } },
{ "type": "Feature", "properties": { "P34_001": "28225", "P34_002": "1", "P34_003": "朝来市役所", "P34_004": "朝来市和田山町東谷213-1" }, "geometry": { "type": "Point", "coordinates": [ 134.853117, 35.339835 ] } },
{ "type": "Feature", "properties": { "P34_001": "28226", "P34_002": "1", "P34_003": "淡路市役所", "P34_004": "淡路市生穂新島8" }, "geometry": { "type": "Point", "coordinates": [ 134.914633, 34.439847 ] } },
{ "type": "Feature", "properties": { "P34_001": "28227", "P34_002": "1", "P34_003": "宍粟市役所", "P34_004": "宍粟市山崎町中広瀬133-6" }, "geometry": { "type": "Point", "coordinates": [ 134.549377, 35.004435 ] } },
{ "type": "Feature", "properties": { "P34_001": "28228", "P34_002": "1", "P34_003": "加東市役所", "P34_004": "加東市社50" }, "geometry": { "type": "Point", "coordinates": [ 134.973345, 34.91737 ] } },
{ "type": "Feature", "properties": { "P34_001": "28229", "P34_002": "1", "P34_003": "たつの市役所", "P34_004": "たつの市龍野町富永1005-1" }, "geometry": { "type": "Point", "coordinates": [ 134.545397, 34.857847 ] } },
{ "type": "Feature", "properties": { "P34_001": "28301", "P34_002": "1", "P34_003": "猪名川町役場", "P34_004": "猪名川町上野字北畑11-1" }, "geometry": { "type": "Point", "coordinates": [ 135.376164, 34.894966 ] } },
{ "type": "Feature", "properties": { "P34_001": "28365", "P34_002": "1", "P34_003": "多可町役場", "P34_004": "多可町中区中村町123" }, "geometry": { "type": "Point", "coordinates": [ 134.923359, 35.050315 ] } },
{ "type": "Feature", "properties": { "P34_001": "28381", "P34_002": "1", "P34_003": "稲美町役場", "P34_004": "稲美町国岡1-1" }, "geometry": { "type": "Point", "coordinates": [ 134.913384, 34.748627 ] } },
{ "type": "Feature", "properties": { "P34_001": "28382", "P34_002": "1", "P34_003": "播磨町役場", "P34_004": "播磨町東本荘1-5-30" }, "geometry": { "type": "Point", "coordinates": [ 134.867911, 34.715302 ] } },
{ "type": "Feature", "properties": { "P34_001": "28442", "P34_002": "1", "P34_003": "市川町役場", "P34_004": "市川町西川辺165-3" }, "geometry": { "type": "Point", "coordinates": [ 134.763289, 34.989365 ] } },
{ "type": "Feature", "properties": { "P34_001": "28443", "P34_002": "1", "P34_003": "福崎町役場", "P34_004": "福崎町南田原3116-1" }, "geometry": { "type": "Point", "coordinates": [ 134.760245, 34.950319 ] } },
{ "type": "Feature", "properties": { "P34_001": "28446", "P34_002": "1", "P34_003": "神河町役場", "P34_004": "神河町寺前64" }, "geometry": { "type": "Point", "coordinates": [ 134.739856, 35.064235 ] } },
{ "type": "Feature", "properties": { "P34_001": "28464", "P34_002": "1", "P34_003": "太子町役場", "P34_004": "太子町鵤1369-1" }, "geometry": { "type": "Point", "coordinates": [ 134.57781, 34.833469 ] } },
{ "type": "Feature", "properties": { "P34_001": "28481", "P34_002": "1", "P34_003": "上郡町役場", "P34_004": "上郡町大持278" }, "geometry": { "type": "Point", "coordinates": [ 134.356098, 34.873583 ] } },
{ "type": "Feature", "properties": { "P34_001": "28501", "P34_002": "1", "P34_003": "佐用町役場", "P34_004": "佐用町佐用2611-1" }, "geometry": { "type": "Point", "coordinates": [ 134.355771, 35.004296 ] } },
{ "type": "Feature", "properties": { "P34_001": "28585", "P34_002": "1", "P34_003": "香美町役場", "P34_004": "香美町香住区香住870-1" }, "geometry": { "type": "Point", "coordinates": [ 134.629175, 35.632169 ] } },
{ "type": "Feature", "properties": { "P34_001": "28586", "P34_002": "1", "P34_003": "新温泉町役場", "P34_004": "新温泉町浜坂2673-1" }, "geometry": { "type": "Point", "coordinates": [ 134.448942, 35.623509 ] } }
]
}市区町役場(庁舎)の表示
市区町を選択すると、対応する市区町役場(庁舎)の位置を地図の中心に移動し、マーカーをクリックすると所在地情報をポップアップする。マーカーから離れるとポップアップは消える。再度クリックすればポップアップする。マーカー以外をクリックすれば、市区町をポップアップする。
※JavaScriptの注意点
- ポリゴンの情報表示とマーカーの情報表示
- 同一市区町内のvisible設定した複数マーカーに対するfitBoundsを流用しているため市区町役場の単独マーカーの場合は地図のズームが最大になり、位置が分からなくなることから、map.setZoom()で拡大率を調整している。
let gmarkers = [];
let marker = [];
let map;
function initMap() {
map_options = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {lat: 35, lng: 135},
streetViewControl: false,
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
},
}
map_document = document.getElementById('map')
map = new google.maps.Map(map_document,map_options);
loadPolygon();
loadMarkers();
}
//市区町界ポリゴン
function loadPolygon() {
// GeoJsonを読み込む
map.data.loadGeoJson('../geojson/hyogo_areas021.geojson');
// スタイルを設定
map.data.setStyle({
fillColor: "#ee7800",
fillOpacity: 0.1,
strokeColor: "#ee7800",
strokeOpacity: 0.7,
strokeWeight: 2,
});
//市区町名表示（クリックイベントの定義）
infoWindow = new google.maps.InfoWindow;
map.data.addListener('click', function(event) {
// InfoWindow内の内容
let country = event.feature.getProperty('N03_003'); //政令指定都市及び郡部
let city = event.feature.getProperty('N03_004'); //市区町名
let cityName = "";
if (country){
cityName = country+city;
}
else {
cityName = city;
}
let html = cityName;
infoWindow.setContent(html);
// 表示位置
infoWindow.setPosition(event.latLng);
// IndowWindowを表示
infoWindow.open(map);
});
}
//市区町役場マーカー
function loadMarkers() {
geojson_url = '../geojson/P34-14_2801.geojson'
$.getJSON(geojson_url, function(results) {
data = results['features']
for (let i=0; i < data.length; i++) {
let coords = results.features[i].geometry.coordinates;
let latLng = new google.maps.LatLng(coords[1], coords[0]);
let ccode = results.features[i].properties['P34_001']; //市区町コード
let cname = results.features[i].properties['P34_003']; //市区町役場
let address = results.features[i].properties['P34_004']; //所在地
//マーカーを生成
let marker = new google.maps.Marker({
position: latLng,
map: map,
市区町: ccode,
});
//情報ウインドウの生成とクリックイベント関数の登録処理
setMarkerListener(marker);
function setMarkerListener(marker) {
//情報ウインドウの生成
let infoWindow = new google.maps.InfoWindow({
content: cname + '<br/>' + address,
});
//マーカーのマウスクリックで情報ウインドウを表示
google.maps.event.addListener(marker, 'click',function(event) {
infoWindow.open(map,marker);
});
//マーカーのマウスアウトで情報ウインドウを消去
google.maps.event.addListener(marker, 'mouseout',function(event) {
infoWindow.close();
});
}
gmarkers.push(marker);
};
})
}
/// 市区町名の選択と表示調整
function selectchanged () {
let scity = document.getElementById("munic").value;
if (scity == "") {
for (i = 0; i < gmarkers.length; i++) {
gmarkers[i].setVisible(true);
}
}
else if (scity != "") {
for (i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].市区町 == scity) {
gmarkers[i].setVisible(true);
}
else {
gmarkers[i].setVisible(false);
}
}
fitBoundsToVisibleMarkers();
map.setZoom(11);
}
}
//マーカー表示範囲ズーム
function fitBoundsToVisibleMarkers() {
let bounds = new google.maps.LatLngBounds();
for (var i=0; i<gmarkers.length; i++) {
if(gmarkers[i].getVisible()) {
bounds.extend( gmarkers[i].getPosition() );
}
}
map.fitBounds(bounds);
};
コメント