Google maps api 3 如何为适合不同类别的标记显示不同的图标？

我正在尝试制作一个谷歌地图，允许用户勾选一个类别，并显示那些特定的位置。我已经让那部分工作了：

我想做的是为每个类别显示一个不同的图标，一个是红色的，一个是蓝色的，等等。我在网上找到了几个例子，但似乎没有什么对我有用。以下是我的代码供参考：

var markers = new Array();
var locations = [
    ['Boonton Town', '402-9410', 'Dial-a-Ride', 40.902, -74.407, 1 ],
    ['Boonton Township', '331-3336', 'Dial-a-Ride', 40.933, -74.425, 2 ],
    ['Butler Borough', '835-8885', 'Dial-a-Ride', 40.999497, -74.346326, 3 ]
    //other locations and categories
];

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

var infowindow = new google.maps.InfoWindow();
var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][3], locations[i][4]),
      map: map,
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  });

  markers.push(marker);
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
          infowindow.setContent(locations[i][0] +
              "<br />"+locations[i][2]+"<br />"+locations[i][1]);
          infowindow.open(map, marker);
      }
  })(marker, i));
}

// shows all markers of a particular category,
// and ensures the checkbox is checked

function show(category) {
    for (var i=0; i<locations.length; i++) {
        if (locations[i][2] == category) {
            markers[i].setVisible(true);
        }
    }
}

// hides all markers of a particular category,
// and ensures the checkbox is cleared

function hide(category) {
    for (var i=0; i<locations.length; i++) {
        if (locations[i][2] == category) {
            markers[i].setVisible(false);
        }
    }
}

// == show or hide the categories initially ==

hide("Dial-a-Ride");
hide("American Legion");
hide("Veterans of Foreign Wars");
hide("Nutrition");

$(".checkbox").click(function(){
    var cat = $(this).attr("value");

    // If checked
    if ($(this).is(":checked")) {
        show(cat);
    }
    else {
        hide(cat);
    }
});

var markers=new Array（）；
变量位置=[
[Boonton Town'，'402-9410'，'Dial-a-Ride'，40.902，--74.407,1]，
[Boonton镇，'331-3336'，'Dial-a-Ride'，40.933，-74.425,2]，
[巴特勒区'，'835-8885'，'Dial-a-Ride'，40.999497，--74.346326，3]
//其他地点和类别
];
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（40.7967667，-74.4815438），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
对于（i=0；i”+位置[i][2]+“
”+位置[i][1]）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；
}
//显示特定类别的所有标记，
//并确保选中复选框
功能展示（类别）{
对于（var i=0；i生成对象
var iconrc={}

然后，将类别与图标图像进行匹配

iconSrc['Dial-a-ride'] = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconSrc['American Legion'] = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
...

添加标记时，用新变量替换图标图像源：

icon: iconSrc[locations[i][2]]

这是一个JSFIDLE，在小窗格中导航很难，所以我将复选框移到了顶部。
啊，哇，我本来以为会是这样，但不知道怎么做。非常感谢！！！嗯。你知道为什么信息窗口的图形会出现奇怪的现象吗？看起来信息窗口中有CSS，但我找不到链接或引用。你能指给我看吗？@Jamie我注意到缩放控件也很奇怪，发现了这个链接：如果你喜欢，也请接受我的答案（点击复选框）：）啊，看起来我发现了这个问题。在1140.css中，有一个属性“img:max width:100%”，不管出于什么原因，谷歌地图都不喜欢它。一旦我解决了这个问题，它就工作得很好。