So, ive made one togglebox that has function to toggle all others when it is ticked/unticked. The problem is when i for example:
1.togglebox [ticked]
2.checkbox [ticked] --> show image
3.checkbox [ticked] --> show image
4.checkbox [ticked] --> show image
But when i click for example on checkbox number 3 to hide image, like this:
1.togglebox [ticked]
2.checkbox [ticked] --> show image
3.checkbox [unticked] --> hide image
4.checkbox [ticked] --> show image
And when i now click on togglebox to hide all images, the checkbox number 3 stays unticked but still shows image.
1.togglebox [unticked]
2.checkbox [unticked] --> hide image
3.checkbox [unticked] --> show image
4.checkbox [unticked] --> hide image
From that point it is bugged, when i again click on togglebox, the next thing happens:
1.togglebox [ticked]
2.checkbox [ticked] --> show image
3.checkbox [ticked] --> hide image
4.checkbox [ticked] --> show image
I hope this is explained very well. Here is my code for that specific part that is only important in my opinion:
<html>
<head>
<title>Old School - Mapa</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="gmaps-sidebar.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="sidebar" >
<div >
<ul role="tablist">
<li><a href="#mapa" role="tab">‌<i ></i></a></li>
</ul>
<ul role="tablist">
<li><a href="https://oldschool-samp.com/" title="Nazad na portal">‌<i ></i></a></li>
</ul>
</div>
<div >
<div id="mapa">
<h1 >Vazna Mesta<span >‌<i ></i></span>
</h1>
<span style="overflow-y: scroll;">
<!--<p><input onclick="removeMarker0('cn')" type="checkbox"></input> PRIKAZI SVE</p>-->
<p><input type="Button" onclick="removeMarker0('cb')" value="Toggle all" /></p>
<p><input id="removeMarker1" type="checkbox" name="cb" checked></input> <img src="images/icon74.png"> Vazna mesta</p>
<p><input id="removeMarker2" type="checkbox" name="cb" checked></input> <img src="images/icon65.png"> Poslovi</p>
<p><input id="removeMarker3" type="checkbox" name="cb" checked></input> <img src="images/icon75.png"> Organizacije</p>
<p><input id="removeMarker4" type="checkbox" name="cb" checked></input> <img src="images/icon114.png"> Grafiti</p>
<p><input id="removeMarker5" type="checkbox" name="cb" checked></input> <img src="images/icon70.png"> Farme</p>
<p><input id="removeMarker6" type="checkbox" name="cb" checked></input> <img src="images/icon80.png"> Apartmani</p>
<p><input id="removeMarker7" type="checkbox" name="cb" checked></input> <img src="images/icon64.png"> Elektrane</p>
<p><input id="removeMarker8" type="checkbox" name="cb" checked></input> <img src="images/icon93.png"> Vozila</p>
<p><input id="removeMarker9" type="checkbox" name="cb" checked></input> <img src="images/icon96.png"> Ostalo</p>
</span>
</div>
</div>
</div>
<!-- The container the map is rendered in -->
<div id="map-canvas" ></div>
<!-- Load all javascript -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery-sidebar.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyCYY5F79nsEpq6Q2Ss-BGCAgY74k4yEOHw"></script>
<script src="js/SanMap.js"></script>
<script>
/*
* Define the map types we will be using.
*
* SanMapType parameters: minZoom, maxZoom, getTileUrlFunction, [optional]tileSize.
*
* The default value for tileSize is 512.
*/
var mapType = new SanMapType(1, 3, function (zoom, x, y) {
return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/map." zoom "." x "." y ".png";//Where the tiles are located
});
var satType = new SanMapType(1, 3, function (zoom, x, y) {
return x == -1 && y == -1 ? "tiles/map.outer.png" : "tiles/sat." zoom "." x "." y ".png";//Where the tiles are located
});
/*var map2Type = new SanMapType(1, 3, function (zoom, x, y) {
return x == -1 && y == -1
? "tiles/map.outer.png"
: "tiles/map." zoom "." x "." y ".png";//Where the tiles are located
});*/
/*
* Create the map.
*
* createMap parameters: canvas, mapTypes, [optional]defaultZoomLevel,
* [optional]defaultLocation, [optional]allowRepeating, [optional]defaultMapType.
*
* The default value for defaultZoomLevel is 2.
* The default value for defaultLocation is null.
* The default value for allowRepeating is false.
* The default value for defaultMapType is the first key in mapTypes.
*/
var map = SanMap.createMap(document.getElementById('map-canvas'),
{'Original': mapType, 'Satelit': satType}, 1, null, false, 'Original');
var locations1 = [ // Vazna mesta
["Opstina BG", 1480.9915,-1770.5961, 'images/icon74.png'],
["Opstina SA", 2388.3662,2465.9727, 'images/icon74.png'],
["Opstina ZG", -2765.1287,375.5398, 'images/icon74.png'],
["Banka BG", 1431.9195,-1027.1347, 'images/icon91.png'],
["Banka SA", 2374.1128,2168.5459, 'images/icon91.png'],
["Banka ZG", -1754.1587,963.8221, 'images/icon91.png'],
["Zlatara BG", 2805.1757,-1111.2426, 'images/icon66.png'],
["Zlatara SA", 2369.9749,2121.0371, 'images/icon66.png'],
["Zlatara ZG", -2455.6675,503.9778, 'images/icon66.png'],
["Posta BG", 598.0868,-1262.2319, 'images/icon88.png']
];
var locations2 = [ // Poslovi
["Mehanicar", 2236.2380,-1919.1660, 'images/icon65.png'],
["Vozac Autobusa", 1482.2886,-2346.0857, 'images/icon65.png'],
["Brodski Carinik", -1499.7024,1276.8247, 'images/icon65.png'],
["Dostavljac Produkta", 2423.4402,-2090.1006, 'images/icon65.png'],
["Pizza Dostavljac", 2101.3145,-1806.5291, 'images/icon65.png'],
["Vozac Nafte", 913.8230,-1234.7288, 'images/icon65.png'],
["Diler Droge", -539.9569,-506.4546, 'images/icon65.png'],
["Krijumcar Droge", -553.3698,-506.4476, 'images/icon65.png'],
["Krijumucar Materijala", 204.6846,-236.3555, 'images/icon65.png'],
["Nelegalni Farmer", -52.7285,62.1289, 'images/icon65.png'],
["Proizvodjac Oruzja", 2173.2466,-2264.3735, 'images/icon65.png'],
["Pilot", 1510.4951,-2473.4622, 'images/icon65.png'],
["Post Express", 2381.9409,-2072.9895, 'images/icon65.png'],
["Poljoprivrednik", -1060.1761,-1195.4727, 'images/icon65.png'],
["Bankar", 1503.6530,-1206.1367, 'images/icon65.png'],
["Cementar", 2442.5496,1954.6122, 'images/icon65.png'],
["Cvecar", -1109.6187,-1667.7958, 'images/icon65.png'],
["Ribar", 713.0135,-1828.4298, 'images/icon65.png'],
["Djubretar", 754.3393,-1363.8527, 'images/icon65.png'],
["Svercer Oruzja", -50.6831,-232.5801, 'images/icon65.png'],
["Rudar", 816.7617,856.7667, 'images/icon65.png'],
["Konobar", 1215.7332,-1668.1177, 'images/icon65.png'],
["Arheolog", 1381.4640,-1088.7904, 'images/icon65.png'],
["Proizvodjac Namestaja", -1829.5977,66.3077, 'images/icon65.png']
];
var locations3 = [ // Organizacije
["Policija BG", 1565.7868,-1697.7216, 'images/icon75.png'],
["Policija SA", 2286.2303,2437.6926, 'images/icon75.png'],
["Policija ZG", -1625.7031,712.1304, 'images/icon75.png'],
["SAJ", 1504.3945,-1475.7064, 'images/icon75.png'],
["Bolnicari", 1172.3673,-1340.1966, 'images/icon76.png'],
["Ministarstvo", 1684.8906,-1343.3948, 'images/icon74.png'],
["Taxi Kompanija", 1784.1796,-1900.1623, 'images/icon104.png'],
["Parking Servis", 1115.6683,-923.4268, 'images/icon99.png'],
["Novinari", 1798.8281,-1305.7137, 'images/icon103.png'],
["Nacionalna Garda", 2620.6054,-2377.1846, 'images/icon75.png'],
["La Cosa Nostra", 1124.6676,-2051.0656, 'images/icon85.png'],
["La Familia Sinatra", 1272.2994,-812.3728, 'images/icon85.png'],
["Triada", 2841.9250,-1573.2844, 'images/icon85.png'],
["Jamaican-British Yardies", 700.5066,-1291.7614, 'images/icon85.png'],
["Mara Salvatrucha 13", 2599.9006,-1057.6295, 'images/icon85.png'],
["Ballas", 2506.9329,-1514.3146, 'images/icon85.png'],
["Groove Street Families", 2486.7020,-1691.2144, 'images/icon85.png'],
["Los Surenos", 1823.0072,-2042.1636, 'images/icon85.png'],
["PO 1", 1212.5551,-1046.6394, 'images/icon85.png'],
["PO 2", 924.4304,-1720.5339, 'images/icon85.png'],
["Saobracajna Policija", 1798.3875,-1578.3270, 'images/icon75.png']
];
var locations4 = [ // Grafiti
["Grafit 1", 1910.7731,-1678.7028, 'images/icon114.png'],
["Grafit 2", 1028.9070,-1343.1971, 'images/icon114.png'],
["Grafit 3", 1768.1693,-2203.8113, 'images/icon114.png'],
["Grafit 4", 1701.5748,-1208.7198, 'images/icon114.png'],
["Grafit 5", 2291.1030,-1111.2173, 'images/icon114.png'],
["Grafit 6", 654.5261,-1386.1083, 'images/icon114.png'],
["Grafit 7", 1995.8987,-1359.8507, 'images/icon114.png'],
["Grafit 8", 529.5560,-1738.8977, 'images/icon114.png'],
["Grafit 9", 1126.0731,-1765.3927, 'images/icon114.png'],
["Grafit 10", 1638.7294,-1909.6046, 'images/icon114.png']
];
var locations5 = [ // Farme
["Farma 1", -222.3576,-1312.3114, 'images/icon70.png'],
["Farma 2", -223.8554,-1357.9336, 'images/icon70.png'],
["Farma 3", -223.6008,-1411.5653, 'images/icon70.png'],
["Farma 4", -260.7890,-1409.6561, 'images/icon70.png'],
["Farma 5", -260.9689,-1358.5756, 'images/icon70.png'],
["Farma 6", 195.8360,219.7414, 'images/icon70.png'],
["Farma 7", 254.3003,219.5323, 'images/icon70.png'],
["Farma 8", 288.8247,219.4157, 'images/icon70.png'],
["Farma 9", 300.2164,204.5857, 'images/icon70.png'],
["Farma 10", 243.0082,204.4290, 'images/icon70.png'],
["Farma 11", -294.5258,-624.5650, 'images/icon70.png'],
["Farma 12", -294.5131,-589.8402, 'images/icon70.png'],
["Farma 13", -294.2415,-521.0508, 'images/icon70.png'],
["Farma 14", -315.9028,-531.7070, 'images/icon70.png'],
["Farma 15", -315.7494,-566.9977, 'images/icon70.png']
];
var locations6 = [ // Apartmani
["Belgrade Waterfront", 940.6454,-2425.0608, 'images/icon80.png'],
["Aqua Beach", 2923.3789,-1587.5837, 'images/icon80.png'],
["Times Square Apartments", 1415.6083,-1701.8799, 'images/icon80.png'],
["Vavilon Tower", 287.7304,-1617.0875, 'images/icon80.png'],
["Crowne Plaza Tower", 1168.9989,-1200.4218, 'images/icon80.png'],
["Seaside Apartments", 105.2891,-1645.3148, 'images/icon80.png'],
["Penthouse", 1582.2784,-1285.1016, 'images/icon80.png']
];
var locations7 = [ // Elektrane
["Gradska elektrana BG", 1546.6699,-1270.4622, 'images/icon64.png'],
["Gradska elektrana SA", 1043.4347,1011.7299, 'images/icon64.png'],
["Gradska Elektrana ZG", -2521.1597,-624.4224, 'images/icon64.png'],
["Prva Seoska Elektrana", -136.0787,1139.4178, 'images/icon64.png'],
["Druga Seoska Elektrana", 2308.9204,-49.3520, 'images/icon64.png'],
["Treca Seoska Elektrana", 211.0028,-231.1066, 'images/icon64.png'],
["Cetvrta Seoska Elektrana", 703.3870,-515.3524, 'images/icon64.png'],
["Peta Seoska Elektrana", -2145.3215,-2281.4961, 'images/icon64.png'],
["Sesta Seoska Elektrana", -2253.5364,2331.9780, 'images/icon64.png']
];
var locations8 = [ // Vozila
["Glavna Auto Pijaca", 1637.5444,-1145.3386, 'images/icon93.png'],
["Auto Pijaca Grotti", 542.7584,-1299.7221, 'images/icon93.png'],
["Auto Skola", 2046.8922,-1908.0786, 'images/icon92.png'],
["Tuning BG ClassicCars", 1041.3623,-1030.2128, 'images/icon68.png'],
["Tuning BG OldTimers", 2644.6619,-2034.8193, 'images/icon68.png'],
["Tuning ZG SuperCars", -2712.5786,217.4365, 'images/icon68.png'],
["Tehnicki Pregled BG", 2876.5918,-1935.8575, 'images/icon67.png'],
["Tehnicki Pregled SA", 1449.4249,649.3497, 'images/icon67.png'],
["Tehnicki Pregled ZG", -1548.8516,514.8412, 'images/icon67.png'],
["Registracija I Tablice BG", 1570.0568,-1334.2224, 'images/icon86.png'],
["Registracija I Tablice SA", 2447.2439,2376.1829, 'images/icon86.png'],
["Registracija I Tablice ZG", -1641.8368,1203.6748, 'images/icon86.png']
];
var locations9 = [ // Ostalo
["Casino", 2043.4570,1918.1044, 'images/icon89.png'],
["Burg", 1215.7954,-923.9620, 'images/icon96.png'],
["Aerodrom", 1581.0444,-2331.8564, 'images/icon81.png'],
["AFK Zona", 1419.8475,-1623.7520, 'images/icon98.png'],
["Kupovina Alata", -497.0915,-196.8161, 'images/icon84.png'],
["Javni WC", 1288.7877,-1653.7588, 'images/icon107.png'],
["Cvecara", 1135.0272,-1673.4751, 'images/icon106.png'],
["Bazen", 2318.8476,-1449.9394, 'images/icon69.png'],
["Trajekt BG", 835.9167,-2064.0049, 'images/icon79.png'],
["Trajekt SA", 2293.9099,556.5950, 'images/icon79.png'],
["Trajekt ZG", -1425.6282,1007.0730, 'images/icon79.png'],
["Hram", 1776.8554,-1785.7571, 'images/icon94.png'],
["Dzamija", 1657.6333,1796.5240, 'images/icon95.png'],
["Narodni Muzej", 1381.8429,-1088.7617, 'images/icon108.png'],
["Pekara", 1684.5703,-1480.7160, 'images/icon97.png'],
["Ribarnica", 483.9151,-1771.9888, 'images/icon78.png'],
["Seoska Kafana", 1360.3123,207.0251, 'images/icon82.png'],
["Kopaonik", -2314.5076,-1648.7323, 'images/icon72.png'],
["Gunshop", 1791.4235,-1164.7052, 'images/icon87.png'],
["Restoran U Centru Grada", 1498.4025,-1582.4191, 'images/icon82.png'],
["Kafana Slozna Braca", 681.5953,-473.5649, 'images/icon82.png'],
["Rent A Car", 1207.5375,-1751.4326, 'images/icon77.png'],
["Prodavnica Automobila", 2131.7727,-1150.2969, 'images/icon93.png'],
["Telekom", 1328.5034,-1557.8286, 'images/icon77.png'],
["Pay And Spray", 915.4384,-2308.5449, 'images/icon77.png'],
["House Upgrade", 2351.2202,-1411.9762, 'images/icon71.png'],
["Oglasi", 1740.9958,-1280.0453, 'images/icon101.png'],
["Hiper Market", 1206.0508,-1459.4910, 'images/icon83.png'],
["Teretana", 2239.2928,-1734.6946, 'images/icon110.png'],
["Karting", 2281.9087,-2364.4048, 'images/icon105.png'],
["Mobile Shop", 915.7721,-918.5951, 'images/icon102.png'],
["Trafika", 1167.7717,-2482.7285, 'images/icon77.png'],
["Kladionica", 1167.7717,-2482.7285, 'images/icon109.png'],
["Trajekt", 1110.1292,-1797.0547, 'images/icon77.png'],
["Komunalije", 1653.9485,-1656.8314, 'images/icon77.png'],
["Vodovod", 1219.3358,-1812.7955, 'images/icon77.png'],
["Kupovina Alata", 1158.1499,-1769.5849, 'images/icon77.png'],
["Binco", 2244.1406,-1696.1451, 'images/icon111.png'],
["CU Shop 030", 1296.8784,-1436.7538, 'images/icon100.png'],
["Enterijer Shop", 1400.0894,-1200.8570, 'images/icon71.png'],
["Metro BG", 1310.1804,-1367.9152, 'images/icon83.png'],
["Metro SA", 2834.4893,2386.5996, 'images/icon83.png'],
["Lotto BG", 1220.0964,-1436.2670, 'images/icon90.png'],
["Lotto SA", 2150.9998,1837.6965, 'images/icon90.png'],
["Lotto ZG", -2699.3984,-5.0133, 'images/icon90.png'],
["Ammu-Nation BG", 1380.2692,-1294.1645, 'images/icon87.png'],
["Ammu-Nation SA", 2177.6460,961.9283, 'images/icon87.png'],
["Ammu-Nation ZG", -2626.5923,209.5155, 'images/icon87.png'],
["Teritorija 1", 1036.6007,-372.9872, 'images/icon112.png'],
["Teritorija 2", 2365.3489,-1758.9768, 'images/icon112.png'],
["Teritorija 3", 2581.4844,-2096.8455, 'images/icon112.png'],
["Teritorija 4", -1868.0782,1660.4165, 'images/icon112.png'],
["HiTech BG Govornica 1", 1770.7937,-1376.9139, 'images/icon73.png'],
["HiTech BG Govornica 2", 2405.1567,-1230.2621, 'images/icon73.png'],
["HiTech BG Govornica 3", 826.5919,-1348.6880, 'images/icon73.png'],
["HiTech SA Govornica 1", 1707.8926,1462.9923, 'images/icon73.png'],
["HiTech SA Govornica 2", 2218.2378,1269.7927, 'images/icon73.png'],
["HiTech SA Govornica 3", 2833.4995,2402.2090, 'images/icon73.png'],
["HiTech ZG Govornica 1", -2654.4041,599.2096, 'images/icon73.png'],
["HiTech ZG Govornica 2", -1967.3436,162.3144, 'images/icon73.png'],
["HiTech ZG Govornica 3", -1917.6848,655.9781, 'images/icon73.png'],
["Magacin Za Mafije", -2943.0845,-1307.7000, 'images/icon113.png'],
["Magacin Za Bande", -2946.9055,-1514.0350, 'images/icon113.png'],
["DM Zona", 1023.2475,-1123.4602, 'images/icon116.png'],
["Osiguravajuce Drustvo", 474.9359,-1524.3483, 'images/icon115.png'],
["Biro Za Zaposljavanje", 1399.7456,-1573.3299, 'images/icon118.png'],
["Korzo", 1309.0437,-1153.3778, 'images/icon117.png']
];
var markers = [];
var loca0 = []; // markers object from group 0
var loca1 = []; // markers object from group 1
var loca2 = []; // markers object from group 2
// loop for creation of markers in each group
for (var i=0; i<locations1.length; i ){
loca1.push(placeMarker(locations1[i])); // Marker pushed in group 1
}
for (var i=0; i < locations2.length; i ) {
loca2.push(placeMarker(locations2[i])); // Marker pushed in group 2
}
//------------------------------------------------------------------------------------------------
function placeMarker(loc){
var latLng = SanMap.getLatLngFromPos(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
optimized: true,
icon: loc[3]
});
markers.push(marker);
/*$('#removeMarker0').click(function(event) { // Remove group 1 marker
if(this.checked){
marker.setVisible(true);
}else{
marker.setVisible(false);
}
});*/
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("<div id='infowindow'>" loc[0] "</div>");
infowindow.open(map, marker);
});
map.addListener('click', function() { if(infowindow) infowindow.close(); });
return marker;
}
var isAllCheck = true;
function removeMarker0(cn){
var cbarray = document.getElementsByName(cn);
if(this.checked){
for(var i = 0; i < cbarray.length; i ){ cbarray[i].checked = isAllCheck; }
for (i = 0; i < markers.length; i ) {
if (markers[i].getMap() != null) markers[i].setMap(null);
else markers[i].setMap(map);
}
}else{
for(var i = 0; i < cbarray.length; i ){ cbarray[i].checked = !isAllCheck; }
for (i = 0; i < markers.length; i ) {
if (markers[i].getMap() != null) markers[i].setMap(null);
else markers[i].setMap(map);
}
}
isAllCheck = !isAllCheck;
}
function removeMarkers(e){
for(let i=0; i<e.data.markers.length; i ){
if(this.checked){
if(e.data.markers[i].getMap() == null){
e.data.markers[i].setMap(map);
}
}
else{
if(e.data.markers[i].getMap() != null){
e.data.markers[i].setMap(null);
}
}
}
}
// then set it
$('#removeMarker1').click({markers: loca1}, removeMarkers);
$('#removeMarker2').click({markers: loca2}, removeMarkers);
google.maps.event.addListener(map, 'dblclick', function(event) {
var pos = SanMap.getPosFromLatLng(event.latLng);
alert(pos.x "," pos.y);
});
var sidebar = $('#sidebar').sidebar();
</script>
</body>CodePudding user response：
the problem is that you execute the same code if your tooglebox is checked or not
$('#removeMarker1').click(function(event) {
for(let i=0; i<loca1.length; i ){
if(this.checked){
// this 2 lines are the same...
if (loca1[i].getMap() != null) loca1[i].setMap(null);
else loca1[i].setMap(map);
}else{
// ... than this 2 lines
if (loca1[i].getMap() != null) loca1[i].setMap(null);
else loca1[i].setMap(map);
}
}
});
Possible solution
Write one function for all your listener (for more lisibility). In the next function you add the marker to your map if the toogleBox is checked and is not already visible. However, if the toogleBox is unchecked and the marker is visible, you hide it. Just pass the selected array of markers as parameters (more infos here).
function removeMarkers(e){
for(let i=0; i<e.data.myArrayOfMarker.length; i ){
if(this.checked){
if(e.data.myArrayOfMarker[i].getMap() == null){
e.data.myArrayOfMarker[i].setMap(map);
}
}
else{
if(e.data.myArrayOfMarker[i].getMap() != null){
e.data.myArrayOfMarker[i].setMap(null);
}
}
}
}
// then set it
$('#removeMarker1').click({myArrayOfMarker: loca1}, removeMarkers);
$('#removeMarker2').click({myArrayOfMarker: loca2}, removeMarkers);
CodePudding user response：
Try this
$('#removeMarker1').click(function(event) {
for(let i=0; i<loca1.length; i ){
if(this.checked){
if (loca1[i].getMap() != null) loca1[i].setMap(null);
else loca1[i].setMap(map);
}else{
if (loca1[i].getMap() != null) loca1[i].setMap(map);
else loca1[i].setMap(null);
}
}
});
$('#removeMarker2').click(function(event) {
for(let i=0; i<loca2.length; i ){
if(this.checked){
if (loca2[i].getMap() != null) loca2[i].setMap(null);
else loca2[i].setMap(map);
}else{
if (loca2[i].getMap() != null) loca2[i].setMap(map);
else loca2[i].setMap(null);
}
}
});