Google Maps - display/hide marker onclick_问答_开发者

Google Maps - display/hide marker onclick

开发者 https://www.devze.com 2022-12-11 14:23 出处：网络

The Problem: I got a Google Map开发者_如何转开发. In my init() Method I set all the Markers to its lon/lat.

The Problem: I got a Google Map开发者_如何转开发. In my init() Method I set all the Markers to its lon/lat. Now I want to have some checkboxes on my page. In my map I have several Markers for Icecream, Playground and Gasstation. Now, clicking on the checkbox for Playground I want to display all Playground markers. On disabling the Checkbox, I want to hide all the Playground Markers. The same for the other Markers. I have created my Checkboxes and written an onclick function for it:

function show_poi_in_map(input_id){
    var select_id = input_id;
    var var_name = $('#' + select_id).attr('checked')?1:0;
    if (var_name == 1) {
        alert('checked');
    }else{
        alert('not checked')
    }
}

But how to go on with it? I am using jQuery. Maybe this will help.

google.maps.event.addListener(map, 'click', function(event) {
  addMarker(event.latLng);
});
function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map,
    draggable: true,
    visible: true
  });
  google.maps.event.addListener(marker, 'click', function(event) {
    this.setMap(null);
  });
}

I know its too late. But for future use.

I have implemented the same

I defined two checkboxes

<body>
<input type="checkbox" id="icecream" onclick="boxclick(this,'icecream')" >IceCream
<input type="checkbox" id="playground" onclick="boxclick(this,'playground')" >PlayGround
</body>

function boxclick(box,category) {
   if (box.checked)
   {
        showMarkers(category);  
   } 
   else 
   {
         hideMarkers(category);
   }
}   

function showMarkers(category)
{
    if(category=='icecream')
    {
        for(var i=0;i<icecream.length;i++)
        {   
            icecream[i].setVisible(true);
         }
     }
     if(category=='playground')
     {
        for(var i=0;i<playground.length;i++)
        {   
            playground[i].setVisible(true);
         }
     }
 }

Similar Function for HideMarkers, Just place setVisible(false) instead of setVisible(true)