Show and hide marker on google map

Question

I am trying to develop map with show/hide marker feature for my project. But I don't have proper knowledge of javascript. So I am looking on google for a while now. And saw many posts related this.Now I am using code from that post shows here

In that post map is fine BUT there are some lack in this post.

It only shows marker but doesn't hide on clicking on checkbox again.
It shows only one category at a time

CODE:

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Marker Categories</title> 
<script type="text/javascript" 
       src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body> 
 <div id="map" style="width: 400px; height: 300px;"></div> 

 <input type="checkbox" value="Show Group 1" onclick="displayMarkers(1);">
 <input type="checkbox" value="Show Group 2" onclick="displayMarkers(2);">

 <script type="text/javascript"> 

 var beaches = [
   ['Bondi Beach', -33.890542, 151.274856, 1,],
   ['Coogee Beach', -33.923036, 151.259052, 1],
   ['Cronulla Beach', -34.028249, 151.157507, 2],
   ['Manly Beach', -33.800101, 151.287478, 2],
   ['Maroubra Beach', -33.950198, 151.259302, 2]
 ];

 var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.88, 151.28),
    mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var markers = [];

 var i, newMarker;

 for (i = 0; i < beaches.length; i++) {
   newMarker = new google.maps.Marker({
   position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
   map: map,
   title: beaches[i][0]
 });

 newMarker.category = beaches[i][3];
 newMarker.setVisible(false);

 markers.push(newMarker);
 }

  function displayMarkers(category) {
  var i;

 for (i = 0; i < markers.length; i++) {
   if (markers[i].category === category) {
     markers[i].setVisible(true);
   }
   else {
     markers[i].setVisible(false);
   }
 }
 }    

</script> 
</body> 
</html>

score 3 · Accepted Answer · answered Feb 06 '16 at 06:45

Please check this code it should be working for you.

here you need to just add jquery version file . and simply check whether the checkbox click at that time you need to setvisible true other wise it becomes false check my code Try this,

           <!DOCTYPE html>
       <html> 
       <head> 
       <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
       <title>Google Maps JavaScript API v3 Example: Marker Categories</title> 
           <script type="text/javascript" 
                   src="http://maps.google.com/maps/api/js?sensor=false"></script>
           <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
       </head> 
       <body> 
        <div id="map" style="width: 400px; height: 300px;"></div> 

        <input type="checkbox" value="Show Group 1" onclick="displayMarkers(this,1);">
        <input type="checkbox" value="Show Group 2" onclick="displayMarkers(this, 2);">

        <script type="text/javascript"> 

        var beaches = [
          ['Bondi Beach', -33.890542, 151.274856, 1,],
          ['Coogee Beach', -33.923036, 151.259052, 1],
          ['Cronulla Beach', -34.028249, 151.157507, 2],
          ['Manly Beach', -33.800101, 151.287478, 2],
          ['Maroubra Beach', -33.950198, 151.259302, 2]
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 10,
           center: new google.maps.LatLng(-33.88, 151.28),
           mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];

        var i, newMarker;

        for (i = 0; i < beaches.length; i++) {
          newMarker = new google.maps.Marker({
          position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
          map: map,
          title: beaches[i][0]
        });

        newMarker.category = beaches[i][3];
        newMarker.setVisible(false);

        markers.push(newMarker);
        }

         function displayMarkers(obj,category) {
             var i;

             for (i = 0; i < markers.length; i++)
             {   
                     if (markers[i].category === category) {
                         if ($(obj).is(":checked")) {

                             markers[i].setVisible(true);
                         } else {
                             markers[i].setVisible(false);    
                         }
                     } 
                     else 
                     {
                         markers[i].setVisible(false);
                     }
                 }


         }    

       </script> 
       </body> 
       </html>

Thanks vyas ! it worked perfectly. I know I got my answer But can I ask you another favor ? If yes then kindly tell me how i can add custom icon instead of marker. I know how to add it but only in single marker map, not in multiple markers. — Rishabh, Feb 06 '16 at 06:53
for that you need to first decide on which marker u need to set custom icon and then you need to do some tricky logic then u can do this basically setIcon() method use for set icon on marker — vyas karnav kumar, Feb 06 '16 at 07:11
Thanks vyas, I will try this. But here i am trying to add third category but its not working. If possible can you update your answer with one additional category so that i come to know where I am missing. — Rishabh, Feb 06 '16 at 07:32
Hi vyas ! I just noticed that you only give half answer of my question. The above code of your is not meeting the requirements of my second pant of my question. As I have mentioned in my question (in the second point) that its showing only one category at a time. Above code of your is not solving that problem of mine. If you know the solution of this then help me. — Rishabh, Feb 06 '16 at 09:12
can u please give me case like how it works then i can give u answer — vyas karnav kumar, Feb 06 '16 at 09:15
Just execute the above code and see the output. Then click on first checkbox, marker of that checkbox will appear. Now click on second checkbox then marker of that checkbox will appear BUt the First check box's marker will get disappear. I just want if I click both checkbox at same time than all marker (both category) should show. — Rishabh, Feb 06 '16 at 09:23
ok just need to comment // markers[i].setVisible(false); from displayMarkers method and then see its working. — vyas karnav kumar, Feb 06 '16 at 09:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/102769/discussion-between-vyas-karnav-kumar-and-rishabh). — vyas karnav kumar, Feb 06 '16 at 09:38

Show and hide marker on google map

1 Answers1