有很多种方法可以解决这个问题，但让我给你看一种方法。 b $ b

首先，让我们从一系列位置开始（从 Google Maps API教程）：

  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] 
]; 
 

这实际上是一个数组数组。它代表5个澳大利亚海滩，我们有名称，纬度，经度和类别。在这种情况下，类别只是一个简单的数字。

然后重要的是我们保留了我们创建的标记的引用。要做到这一点，我们可以使用标记数组存储每个新标记，并且还可以使用其分类标识扩充每个标记对象：

  var markers = []; 

 var i，newMarker; 

 for（i = 0; i  newMarker = new google.maps.Marker（{
 position：new google.maps.LatLng （海滩[i] [1]，海滩[i] [2]），
图：地图，
标题：海滩[i] [0] 
}）; 

 newMarker.category = beaches [i] [3]; 
 newMarker.setVisible（false）; 

 markers.push（newMarker）; 
} 
 

最后，当我们需要显示标记时，我们可以简单地迭代 markers 数组，并根据我们想要显示的类别调用 setVisible（）方法。

您可能想查看以下完整示例：

 <！DOCTYPE HTML&GT; 
< html> 
< head> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/> 
< title> Google Maps JavaScript API v3示例：标记类别< / title> 
< script type =text / javascript
 src =http://maps.google.com/maps/api/js?sensor=false>< / script> 
< / head> 
< body> 
< div id =mapstyle =width：400px; height：300px;>< / div> 

< input type =buttonvalue =Show Group 1onclick =displayMarkers（1）;> 
< input type =buttonvalue =Show Group 2onclick =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  newMarker = new google.maps.Marker（{
 position：new google.maps.LatLng （海滩[i] [1]，海滩[i] [2]），
图：地图，
标题：海滩[i] [0] 
}）; 

 newMarker.category = beaches [i] [3]; 
 newMarker.setVisible（false）; 

 markers.push（newMarker）; 
} 

 function displayMarkers（category）{
 var i; 

（i = 0; i< markers.length; i ++）{
 if（markers [i] .category === category）{
 markers [i] .setVisible（真）; 
} 
 else {
 markers [i] .setVisible（false）; 
} 
} 
} 

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

点击显示组2按钮后，上面的示例截图：

Google Maps JavaScript API v3示例：Marker Categories http ：//img535.imageshack.us/img535/8485/markercat.jpg

I'm trying to achieve the following thing: Have different types of markers on my map for example, schools, libraries, bus stops and I want to be able to show/hide each group of markers.

I have been searching google for a while but nothing came up :/

Any ideas how this can be achieved ?

There are various ways to tackle this, but let me show you one approach.

First, let's start with an array of locations (borrowed from the Google Maps API Tutorials):

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]
];

This is actually an array of arrays. It represents 5 Australian beaches, and we have the name, latitude, longitude and category. The category in this case is just a number for the sake of simplicity.

Then it is important that we keep a reference of the markers that we create. To do this, we can use a markers array where we store each new marker, and we can also augment each marker object with its category id:

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);
}

Finally, when we need to show the markers, we can simply iterate over the markers array, and call the setVisible() method according to what category we would like to show.

You may want to check out the following complete example:

<!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="button" value="Show Group 1" onclick="displayMarkers(1);">
   <input type="button" 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>

Screenshot from the above example, after clicking on the "Show Group 2" button:

Google Maps JavaScript API v3 Example: Marker Categories http://img535.imageshack.us/img535/8485/markercat.jpg