2014-10-21 5 views
0

На этой странице http://317.masud-rana.com/apartments/ я поставил флажок под названием «Выбрать все» внизу, который автоматически проверяет все остальные флажки. Используя следующий код, его возможность иметь то, что я хочу, но значки маркеров не отображаются. Как я могу это исправить?Выбрать все флажки с галочками Google Maps marker

$(document).ready(function() { 
    $('#selecctall').click(function (event) { //on click 
     if (this.checked) { // check select status 
      $('.glemps-ckbx').each(function() { //loop through each checkbox 
       this.checked = true; //select all checkboxes with class "checkbox1"    
      }); 
     } else { 
      $('.glemps-ckbx').each(function() { //loop through each checkbox 
       this.checked = false; //deselect all checkboxes with class "checkbox1"      
      }); 
     } 
    }); 
}); 

Edit: Вот код из Google Maps

<script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"> 

</script> 
<link rel="stylesheet" href="../wp-content/themes/317linden/css/mapstyle.css" /> 
<div id="MapWrapper" class="googleMap"></div> 
<div id="MapItemHolder"> 
    <table> 
     <tr> 
      <td> 
       <input type="checkbox" id="bank" class="glemps-ckbx" value="Banks" onclick="neighbourhood('bank');" />Banks/ATms 
      </td> 
      <td> 
       <input type="checkbox" id="art_gallery" class="glemps-ckbx checkbox1" value="Music" onclick="neighbourhood('art_gallery');" />Arts/Music 
      </td> 
      <td> 
       <input type="checkbox" id="park" class="glemps-ckbx checkbox1" value="Parks" onclick="neighbourhood('park');" />Parks 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" id="food-bar" class="glemps-ckbx" value="Bars" onclick="neighbourhood('food-bar');" />Good Eats/Bars 
      </td> 
      <td> 
       <input type="checkbox" id="gas_station" class="glemps-ckbx" value="Gas" onclick="neighbourhood('gas_station');" />Gas Stations 
      </td> 
      <td> 
       <input type="checkbox" id="grocery_or_supermarket" class="glemps-ckbx" value="Grocery Stores " onclick="neighbourhood('grocery_or_supermarket');" />Grocery Stores 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" id="university" class="glemps-ckbx" value="Universities" onclick="neighbourhood('university');" />Universities 
      </td> 
      <td> 
       <input type="checkbox" id="bus_station-train_station" class="glemps-ckbx" value="Transportation" onclick="neighbourhood('bus_station-train_station');" />Public Transportation 
      </td> 
      <td> 
       <input type="checkbox" id="parking" class="glemps-ckbx" value="Parking" onclick="neighbourhood('parking');" />Parking Garages 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" id="hospital" class="glemps-ckbx" value="Hospitals" onclick="neighbourhood('hospital');" />Hospitals 
      </td> 
      <td> 
       <input type="checkbox" id="shopping_mall-clothing_store" class="glemps-ckbx" value="Shopping" onclick="neighbourhood('shopping_mall-clothing_store');" />Shopping/Retail 
      </td> 
      <td> 
       <input type="checkbox" id="restaurant" class="glemps-ckbx" value="Hotels" onclick="neighbourhood('restaurant');" />Hotels 
      </td> 
     </tr> 
    </table> 
</div> 
<script src="http://317.masud-rana.com/wp-content/themes/317linden/js/map.js"></script> 
<input type="checkbox" id="selecctall" />Selecct All 

Вот код в map.js

var map; 
var infowindow; 
var bank = [], 
    bar = [], 
    univ = [], 
    hosp = [], 
    park = [], 
    parking = []; 
var gas = []; 
var grocery = []; 
var museum = []; 
var restaurant = []; 
var shopping = []; 
var transit = []; 
var center_infowindow; 
var center = new google.maps.LatLng(41.408488, -75.660492); 

function initialize() { 
    map = new google.maps.Map(document.getElementById('MapWrapper'), { 
     panControl: false, 
     streetViewControl: false, 
     zoomControl: false, 
     center: center, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var center_marker = new google.maps.Marker({ 
     position: center, 
     map: map, 
     icon: '../wp-content/themes/317linden/images/map-icon1.png' 
    }); 

    google.maps.event.addListener(center_marker, 'click', function() { 

     center_infowindow = new google.maps.InfoWindow({ 
      position: center, 
      map: map, 
      content: "<a href='http://www.savoyeaddison.com/'>Savoye</a><br>3850 Vitruvian   Way<br>Addison, TX 75001<br>(888) 904-4695" 
     }); 
    }); 

} 

function neighbourhood(type) { 
    console.log(type); 
    if ($('#' + type).is(':checked')) { 
     ++n; 
     var type_split = type.split('-'); 
     for (var k = 0; k < type_split.length; k++) { 
      var request = { 
       location: center, 
       radius: 1200, 
       types: [type_split[k]] 
      }; 
      infowindow = new google.maps.InfoWindow(); 
      var service = new google.maps.places.PlacesService(map); 
      service.nearbySearch(request, callback); 
     } 
    } else { 
     --n; 
     var x; 
     switch (type) { 
      case 'bank': 
       for (var x in bank) { 
        bank[x].setMap(null); 
       } 
       break; 
      case 'food-bar': 
       for (var x in bar) { 
        bar[x].setMap(null); 
       } 
       break; 
      case 'gas_station': 
       for (var x in gas) { 
        gas[x].setMap(null); 
       } 
       break; 
      case 'grocery_or_supermarket': 
       for (var x in grocery) { 
        grocery[x].setMap(null); 
       } 
       break; 
      case 'art_gallery': 
       for (var x in museum) { 
        museum[x].setMap(null); 
       } 
       break; 
      case 'restaurant': 
       for (var x in restaurant) { 
        restaurant[x].setMap(null); 
       } 
       break; 
      case 'shopping_mall-clothing_store': 
       for (var x in shopping) { 
        shopping[x].setMap(null); 
       } 
       break; 
      case 'bus_station-train_station': 
       for (var x in transit) { 
        transit[x].setMap(null); 
       } 
       break; 
      case 'park': 
       for (var x in park) { 
        park[x].setMap(null); 
       } 
       break; 
      case 'parking': 
       for (var x in parking) { 
        parking[x].setMap(null); 
       } 
       break; 
      case 'university': 
       for (var x in univ) { 
        univ[x].setMap(null); 
       } 
       break; 
      case 'university': 
       for (var x in univ) { 
        univ[x].setMap(null); 
       } 
       break; 
      case 'hospital': 
       for (var x in hosp) { 
        hosp[x].setMap(null); 
       } 
       break; 
     } 
    } 

    function callback(results, status) { 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
      for (var i = 0; i < results.length; i++) { 
       createMarker(results[i], type); 
      } 
     } 
    } 
} 

var marker; 
var n = 0; 

function createMarker(place, type) { 
    console.log(n); 
    var placeLoc = place.geometry.location; 
    marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location, 
     icon: '../wp-content/themes/317linden/images/hotspot' + n + '.png' 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     console.log(place); 
     infowindow.setContent(place.name + "<br>" + place.vicinity); 
     infowindow.open(map, this); 
    }); 
    switch (type) { 
     case 'bank': 
      bank.push(marker); 
      break; 
     case 'gas_station': 
      gas.push(marker); 
      break; 
     case 'grocery_or_supermarket': 
      grocery.push(marker); 
      break; 
     case 'museum': 
      museum.push(marker); 
      break; 
     case 'restaurant': 
      restaurant.push(marker); 
      break; 
     case 'shopping_mall-clothing_store': 
      shopping.push(marker); 
      break; 
     case 'bus_station-train_station': 
      transit.push(marker); 
      break; 
     case 'hospital': 
      hosp.push(marker); 
      break; 
     case 'parking': 
      parking.push(marker); 
      break; 
     case 'park': 
      park.push(marker); 
      break; 
     case 'university': 
      univ.push(marker); 
      break; 
     case 'food-bar': 
      bar.push(marker); 
      break; 
     case 'art_gallery': 
      museum.push(marker); 
      break; 
    } 
} 

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

ответ

1

Просто вызвать событие щелчка на каждой флажок, если флажок еще не отмечен. Отмените операцию, когда вы снимите отметку с , установите флажок «».

$('#selecctall').click(function() { 
    if (this.checked) { 
     $('.glemps-ckbx').each(function() { 
      // check if not already checked... 
      if (!this.checked) { 
       this.click(); 
      } 
     }); 
    } else { 
     $('.glemps-ckbx').each(function() { 
      if (this.checked) { 
       this.click(); 
      } 
     }); 
    } 
}); 
+0

Огромное спасибо за помощь! Я поместил код, он работает, но отображает одинаковые значки для всех маркеров. Вы можете снова проверить страницу, чтобы узнать, о чем я говорю. – Babu

+0

Нет. Добавьте соответствующий код к своему вопросу. http://stackoverflow.com/help/mcve – MrUpsidown

+0

Добавлен соответствующий код вопроса. Благодарю. – Babu