CODEWITHSUNDEEP
javascriptgoogle-maps
Rishabh
Rishabh

Reputation: 640

Show and hide marker on google map

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.

  1. It only shows marker but doesn't hide on clicking on checkbox again.

  2. 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>

Upvotes: 1

Views: 10076

Answers (1)

vyas karnav kumar
vyas karnav kumar

Reputation: 73

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>

Upvotes: 3

Related Questions