Не удается получить флажки для работы

Question

Я читал различные сообщения и пытался установить флажки для управления моими маркерами (вкл./Выкл.), Безрезультатно. Ниже приведен код, к которому я до сих пор работал, но, к сожалению, он все еще не работает.

Любые идеи/помощь были бы весьма полезны.

получили его работы с xml, но я хочу использовать js/json файлы

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript"> 
var json = [{ 
     "Name" : "NER 1", 
     "Latitude" : 51.50732, 
     "Longitude" : -0.128673, 
     "Connect" : "BS123", 
     "ChargeR" : "Standard", 
     "ConType" : 1, 
     "Operator" : "NER", 
    },{ 
     "Name" : "NER 2", 
     "Latitude" : 51.506906, 
     "Longitude" : -0.126548, 
     "Connect" : "BS234", 
     "ChargeR" : "Standard", 
     "ConType" : 2, 
     "Operator" : "NER", 
    },{ 
     "Name" : "SEW 3", 
     "Latitude" : 51.508382, 
     "Longitude" : -0.129724, 
     "Connect" : "BS345", 
     "ChargeR" : "Standard", 
     "ConType" : 3, 
     "Operator" : "SEW", 
    },{ 
     "Name" : "SEW 1", 
     "Latitude" : 51.508322, 
     "Longitude" : -0.126902, 
     "Connect" : "BS123", 
     "ChargeR" : "Standard", 
     "ConType" : 4, 
     "Operator" : "SEW", 
    },{ 
     "Name" : "TAW 2", 
     "Latitude" : 51.507841, 
     "Longitude" : -0.126066, 
     "Connect" : "BS234", 
     "ChargeR" : "Standard", 
     "ConType" : 2, 
     "Operator" : "TAW", 
    },{ 
     "Name" : "TAW 3", 
     "Latitude" : 51.50746, 
     "Longitude" : -0.12759, 
     "Connect" : "BS345", 
     "ChargeR" : "Standard", 
     "ConType" : 3, 
     "Operator" : "TAW", 
    },{ 
     "Name" : "RCR 1", 
     "Latitude" : 51.506439, 
     "Longitude" : -0.127922, 
     "Connect" : "BS234", 
     "ChargeR" : "Standard", 
     "ConType" : 4, 
     "Operator" : "NER", 
    },{ 
     "Name" : "RCR 2", 
     "Latitude" : 51.50943, 
     "Longitude" : -0.127428, 
     "Connect" : "BS234", 
     "ChargeR" : "Standard", 
     "ConType" : 2, 
     "Operator" : "NER", 
    } 
] 
// JavaScript Document 
function initialize() { 
    var latlng = new google.maps.LatLng(51.508075,-0.127873); 
    var myOptions = { 
     zoom: 17, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: true, 
    }; 
    var map = new google.maps.Map(document.getElementById("map"),myOptions);  


     var markers = []; 
     var categoryIcons = {} 
     for (var i = 0; i < json.length; i++) { 
      var data = json[i], 
      latLng = new google.maps.LatLng(data.Latitude, data.Longitude); 
      var marker = new google.maps.Marker({ 
      position: latLng, 
      map : map, 
      title : data.Name, 
      icon : categoryIcons[data.ConType], 
      });  
      // === Store the category and name info as a marker properties === 
      marker.mycategory = data.ConType; 
      marker.myname = data.Name; 
      marker.myoperator = data.Operator,    
      markers.push(marker); 
      // end Looping through the JSON data 
      <!-- Map traffic begin -->  
      (function (marker, data) { 
       // Attaching a click event to the current marker 
       google.maps.event.addListener(marker, 'click', function(e) {}); // end Attaching a click event to the current marker  
      })(marker, data); // end Creating a closure 

      // == shows all markers of a particular category, and ensures the checkbox is checked == 
     function show(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
      if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(true); 
      } 
     } 
     // == check the checkbox == 
     document.getElementById(category+"box").checked = true; 
     } 

     // == hides all markers of a particular category, and ensures the checkbox is cleared == 
     function hide(category) { 
     for (var i=0; i<gmarkers.length; i++) { 
      if (gmarkers[i].mycategory == category) { 
      gmarkers[i].setVisible(false); 
      } 
     } 
     // == clear the checkbox == 
     document.getElementById(category+"box").checked = false; 
     // == close the info window, in case its open on a marker that we just hid 
     infoBubble.close(); 
     } 

     // == a checkbox has been clicked == 
     function boxclick(box,category) { 
     if (box.checked) { 
      show(category); 
     } else { 
      hide(category); 
     } 
     // == rebuild the side bar 
     makeSidebar(); 
     } 

     function myclick(i) { 
     google.maps.event.trigger(gmarkers[i],"click"); 
     } 

     } 
     } 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body onLoad="initialize()"> 
<div id="map" style="margin-top: 10px; margin-left: auto; margin-right: auto; width: 1000px; height: 650px;"></div> 
<div style="margin-top: 10px; margin-left: auto; margin-right: auto; width: 1000px; height: 650px;"> 
    <input type="checkbox" id="1" class="cas" name="1" value="1" onclick="boxclick(this,'1')" checked/>1<br> 
    <input type="checkbox" id="2" class="cas" name="2" value="2" onclick="boxclick(this,'2')" checked/>2<br> 
    <input type="checkbox" id="3" class="cas" name="3" value="3" onclick="boxclick(this,'3')" checked/>3<br> 
    <input type="checkbox" id="4" class="cas" name="4" value="4" onclick="boxclick(this,'4')" checked/>4 
    </div> 

Приветствия

Answer 1

Все ваши функции являются локальными для функции инициализации. Чтобы использовать их из событий HTML-click, они должны находиться в глобальной области. Массив gmarkers не определен.

var gmarkers = []; 
function initialize() { 
    var latlng = new google.maps.LatLng(51.508075,-0.127873); 
    var myOptions = { 
     zoom: 17, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: true, 
    }; 
    var map = new google.maps.Map(document.getElementById("map"),myOptions); 


    var categoryIcons = {} 
    for (var i = 0; i < json.length; i++) { 
     var data = json[i], 
     latLng = new google.maps.LatLng(data.Latitude, data.Longitude); 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map : map, 
      title : data.Name, 
      icon : categoryIcons[data.ConType], 
     }); 
     // === Store the category and name info as a marker properties === 
     marker.mycategory = data.ConType; 
     marker.myname = data.Name; 
     marker.myoperator = data.Operator, 
     gmarkers.push(marker); 
     // end Looping through the JSON data 
     <!-- Map traffic begin --> 
     (function (marker, data) { 
      // Attaching a click event to the current marker 
      google.maps.event.addListener(marker, 'click', function(e) {}); // end Attaching a click event to the current marker 
      })(marker, data); // end Creating a closure 

     } 
} // end of initialize function 

// == shows all markers of a particular category, and ensures the checkbox is checked == 
function show(category) { 
    for (var i=0; i<gmarkers.length; i++) { 
    if (gmarkers[i].mycategory == category) { 
     gmarkers[i].setVisible(true); 
    } 
    } 
    // == check the checkbox == 
    document.getElementById(category+"box").checked = true; 
} 

// == hides all markers of a particular category, and ensures the checkbox is cleared == 
function hide(category) { 
    for (var i=0; i<gmarkers.length; i++) { 
    if (gmarkers[i].mycategory == category) { 
     gmarkers[i].setVisible(false); 
    } 
    } 
    // == clear the checkbox == 
    document.getElementById(category+"box").checked = false; 
    // == close the info window, in case its open on a marker that we just hid 
    infoBubble.close(); 
} 

// == a checkbox has been clicked == 
function boxclick(box,category) { 
    if (box.checked) { 
    show(category); 
    } else { 
    hide(category); 
    } 
    // == rebuild the side bar 
    makeSidebar(); 
} 

function myclick(i) { 
    google.maps.event.trigger(gmarkers[i],"click"); 
} 

google.maps.event.addDomListener(window, 'load', initialize);