简体   繁体   中英

Hiding And Showing a marker which have same icons google map api

My question is i want to hide icons which they have same icon then i can print back into map. For example i have one computer icon and one walkie talkie icon. In the map i want to hide computer icons and they will disapper. After that i can able to hide walkie talkie icons. Then i can able to print only computer icons into map.

 var marker = new google.maps.Marker({
                position: location,
                 map: map,
                 icon: img,
                 title: x
                });
                markers.push(marker);

I am pushing markers like that. And i have hide and show table.

<div id="marker-panel">
  <input onclick="clearMarkers();" type=button value="Hide Markers">
  <input onclick="showMarkers();" type=button value="Show All Markers">
</div>

and their functions is like that

    function setMapOnAll(map) {
      for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
        var imagebox = document.getElementById('images').value;
        markers[i].setIcon(imagebox);
        window.alert('Loop');
      }
    }

  function clearMarkers() {
    setMapOnAll(null);
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
}

My first problem is i am not able to show my marker after i clicked showMarkers();. I found problem. I am doing loop correctly but it cant access to icon images. Well actually this is my basic problem. But i want them in group like only hide computers or only hide walkie talkies. Any help will be great. Thanks for reading this i hope you will give me hand :) Have great day..

I solved the problem. it is bad coding but it works i guess. I didnt have any problem. codes are below

 if(document.getElementById('images').value == 'computer.png'){
                var x = 'The elevation at this point is ' +
                results[0].elevation + ' meters.';
                var marker = new google.maps.Marker({
                position: location,
                 map: map,
                 icon: img,
                 title: x
                });
                computer.push(marker);
                //sağ tık silme fonksiyonu
                google.maps.event.addListener(marker, 'rightclick', function(event) {
                marker.setMap(null);
               });
              }
              else {// telsiz
                var x = 'The elevation at this point is ' +
                results[0].elevation + ' meters.';
                var marker = new google.maps.Marker({
                position: location,
                 map: map,
                 icon: img,
                 title: x
                });
                telsiz.push(marker);}
                google.maps.event.addListener(marker, 'rightclick', function(event) {
                marker.setMap(null);
               });
            }


    function setMapOnAll(map) {
        for (var i = 0; i < computer.length+telsiz.length; i++) {
          computer[i].setMap(map);
          for(var j=0; j < telsiz.length; j++){
            telsiz[i].setMap(map);
          }
        }
    }

  function clearComputer(map) {
    for(var i = 0; i<computer.length; i++){
      computer[i].setMap(null);
    }
  }

  function clearTelsiz(map) {
    for(var i = 0; i<telsiz.length; i++){
      telsiz[i].setMap(null);
    }
  }

  // Shows any markers currently in the array.
  function showMarkers() {
    setMapOnAll(map);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM