google maps api v3でカテゴリごとにマーカーを表示し、チェックボックスで表示・非表示を行いたい

google maps apiで複数マーカーをカテゴリごとに作成（例えば山マーカー、施設マーカー等）後、
マップに表示されたのち、カテゴリ別のチェックボックスで表示・非表示を行いたいのですが、
どうすればよろしいでしょうか。

配列でカテゴリ名と緯度経度を設定し、マーカーを作成して表示・非表示させる方法や、
緯度・経度・カテゴリを設定したXMLファイルを読み込ませ、マップに表示させてボタン等
で表示・非表示する方法等、コードの載った個人サイトを参考にjavascriptを作成してみましたが、
うまくいきませんでした。

ご教授の程、よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

上部中央のチェックボックスを変更してみてください。
コピペコピペで作ったのでご要望に合うかわかりませんが、参考になれば幸いです。
サンプル

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <style type="text/css">
5      html, body { height: 100%; margin: 0; padding: 0; }
6      #map { height: 100%; }
7    </style>
8  </head>
9  <body>
10    <div id="map"></div>
11    <script type="text/javascript">
12
13var map;
14function initMap() {
15  map = new google.maps.Map(document.getElementById('map'), {
16    center: {lat: -34.397, lng: 150.644},
17    zoom: 8
18  });
19
20  var controlLists = document.createElement('div');
21  'ABC'.split('').forEach(function(chr){
22  
23    var markers=[
24      addMarker(chr),
25      addMarker(chr),
26      addMarker(chr),
27    ];
28    
29    var controlList = document.createElement('input');
30    controlList.type = 'checkbox';
31    controlList.addEventListener('click',function(e){
32      if (this.checked) {
33        markers.forEach(function(marker){
34          marker.setOpacity(1.0);
35        })
36      } else {
37        markers.forEach(function(marker){
38          marker.setOpacity(0.2);
39        });
40      }
41    });
42    controlLists.appendChild(controlList);
43    
44  });
45  
46  function setControl(controlDiv, map) {
47
48    var controlUI = document.createElement('div');
49    controlUI.style.backgroundColor = '#fff';
50    controlUI.style.border = '2px solid #fff';
51    controlUI.style.borderRadius = '3px';
52    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
53    controlUI.style.cursor = 'pointer';
54    controlUI.style.marginBottom = '22px';
55    controlUI.style.textAlign = 'center';
56    controlUI.title = 'Click to recenter the map';
57    controlDiv.appendChild(controlUI);
58
59	controlLists.style.padding = '15px';
60    controlUI.appendChild(controlLists);
61
62
63  }
64  
65  var controlDiv = document.createElement('div');
66  var control = new setControl(controlDiv, map);
67  controlDiv.index = 1;
68  map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
69
70  
71  function addMarker(chr){
72    return new google.maps.Marker({
73      position: {lat: -34.397 + Math.random() -.5, lng: 150.644 + Math.random() -.5},
74      label: chr,
75      opacity: 0.2,
76      map: map
77    });
78  }
79  
80}
81
82    </script>
83    <script async defer
84      src="http://maps.googleapis.com/maps/api/js?callback=initMap">
85    </script>
86  </body>
87</html>