пользовательские маркеры с флажком

Я изменил кодировку (см. Ниже), чтобы настроить собственные маркеры. НО эти флажки больше не работают. Кто-нибудь может помочь мне выяснить, в чем проблема? Я попытался перекодировать несколько раз, но я до сих пор не могу заставить работать флажков ..пользовательские маркеры с флажком

<body> 
<div id="map-canvas"></div> 
       <img src='https://lh6.googleusercontent.com/-rk8_2yBXUUg/T-FbxjCq4WI/AAAAAAAAAGo/UIMF525RtLY/s37/ramp.png'/><input type="checkbox" value="4596492" id="markers_ramp" onclick="changeLayer(this.value);"/> Ramps<br/> 
       <img src='https://lh6.googleusercontent.com/-iiPL-RHuq-I/T-FeawdppiI/AAAAAAAAAHY/G--PHmgTbQs/s37/stair.png'/><input type="checkbox" value="4597805" id="markers_stairway" onclick="changeLayer(this.value);"/> Stairways<br/>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

    google.load('visualization', '1'); 

    function initialize() 
    { 
     var infoWindow = new google.maps.InfoWindow(); 
     var map = new google.maps.Map(document.getElementById('map-canvas'), { 
      center: new google.maps.LatLng(1.36940, 103.84856), 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 


     // RAMP markers query 
     var ramp_query = "SELECT 'Type', Coordinates, Waypoints FROM 4597805"; 
     ramp_query = encodeURIComponent(ramp_query); 

     var gvizQuery_ramp = new google.visualization.Query(
      'http://www.google.com/fusiontables/gvizdata?tq=' + ramp_query); 

     var create_rampMarker = function(ramp_coordinate, type) 
     { 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: ramp_coordinate, 
       icon: new google.maps.MarkerImage('https://lh6.googleusercontent.com/-rk8_2yBXUUg/T-FbxjCq4WI/AAAAAAAAAGo/UIMF525RtLY/s37/ramp.png') 
      }); 
      google.maps.event.addListener(marker, 'click', function(event) { 
      infoWindow.setPosition(ramp_coordinate); 
      infoWindow.setContent('<b>Type: </b>'+ type); 
      infoWindow.open(map); 
      }); 
     };   

     gvizQuery_ramp.send(function(response) 
     { 
      var numRows = response.getDataTable().getNumberOfRows(); 

      // For each row in the table, create a marker 
      for (var i = 0; i < numRows; i++) { 
       var stringCoordinates = response.getDataTable().getValue(i, 1); 
       var splitCoordinates = stringCoordinates.split(','); 
       var lat = splitCoordinates[0]; 
       var lng = splitCoordinates[1]; 
       var ramp_coordinate = new google.maps.LatLng(lat, lng); 
       var type = response.getDataTable().getValue(i, 0); 

       create_rampMarker(ramp_coordinate, type); 
      } 
     }); 


     // STAIRWAY markers query 
     var stairway_query = "SELECT 'Type', Coordinates FROM 4596492"; 
     stairway_query = encodeURIComponent(stairway_query); 

     var gvizQuery_stairway = new google.visualization.Query(
      'http://www.google.com/fusiontables/gvizdata?tq=' + stairway_query); 

     var create_stairwayMarker = function(stairway_coordinate, type) 
     { 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: stairway_coordinate, 
       icon: new google.maps.MarkerImage('https://lh6.googleusercontent.com/-iiPL-RHuq-I/T-FeawdppiI/AAAAAAAAAHY/G--PHmgTbQs/s37/stair.png') 
      }); 
      google.maps.event.addListener(marker, 'click', function(event) { 
       infoWindow.setPosition(stairway_coordinate); 
       infoWindow.setContent('<b>Type: </b>'+ type); 
       infoWindow.open(map); 
      }); 
     };   

     gvizQuery_stairway.send(function(response) 
     { 
      var numRows = response.getDataTable().getNumberOfRows(); 

      // For each row in the table, create a marker 
      for (var i = 0; i < numRows; i++) { 
       var stringCoordinates = response.getDataTable().getValue(i, 1); 
       var splitCoordinates = stringCoordinates.split(','); 
       var lat = splitCoordinates[0]; 
       var lng = splitCoordinates[1]; 
       var stairway_coordinate = new google.maps.LatLng(lat, lng); 
       var type = response.getDataTable().getValue(i, 0); 

       create_stairwayMarker(stairway_coordinate, type); 
      } 
     }); 

    } // function initialize 

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


    function changeLayer(tableidselections) 
    { 
     if (tableidselections == 4596492) { 
      if (document.getElementById("markers_ramp").checked == true) { 
       stairway_query.setMap(map); 
      } 
      if (document.getElementById("markers_ramp").checked == false) { 
       stairway_query.setMap(null); /*layersetoff*/ 
      } 
     } 

     if (tableidselections == 4597805) { 
      if (document.getElementById("markers_stairway").checked == true) { 
       stairway_query.setMap(map); 
      } 
      if (document.getElementById("markers_stairway").checked == false) { 
       stairway_query.setMap(null); /*layersetoff*/ 
      } 
     } 

    } // function changelayer 

</script>

источник

2012-07-21 user1542445

вы не получите очевидные ошибки JavaScript с этим кодом? – geocodezip

Nope. Насколько я знаю, ошибок не было. – user1542445

Первой ошибкой, которую я получил, была ramp_query, и у stairway_query нет методов setMap (потому что они имеют нулевое значение в глобальном контексте, в которые запускаются события HTML-click). Я считаю, что очевидная ошибка JavaScript, поскольку это объясняет, почему флажки не работают. – geocodezip

Один из способов исправить проблему, чтобы сделать массивы маркеров с помощью запроса, а затем скрыть и показать их с помощью setMap

working example

источник

2012-07-23 09:02:13 geocodezip

Ок, я получил его сейчас. Спасибо за образец! Ценить это! – user1542445

пользовательские маркеры с флажком

ответ

Смежные вопросы