mehrshaddarzi
12/10/2017 - 7:31 AM

gmap.js

gmap.js

http://jsfiddle.net/3Y8ZE/1/


	  <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,
		  icon: \''.Front::get_instance()->path.'img/targetmap.png\',
          title: beaches[i][0]
        });

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

		
		google.maps.event.addListener(newMarker, \'click\', function() {
			alert(beaches[i][0]);
		});
		

		
        }
		
		
		
		
		

         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>