删除选项更改上的标记Google Maps JavaScript API v3

Question

I need to clear/remove all previous markers on option change. I've tried searching the the Maps API documentation and Stackoverflow for an answer, unfortunately I'm not a JavaScript guru. They all seem to be implemented in a different way and I have not been successful in making it work. The closest I've come, is removing one marker.

I appreciate any help provided, Thanks!!

map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 14,
  center: new google.maps.LatLng(40.680099,-73.945693),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

infowindow = new google.maps.InfoWindow();

var marker, i;

var markerShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
    new google.maps.Size(40, 37),
    new google.maps.Point(0, 0),
    new google.maps.Point(12, 35));

var restaurantColor = "0080FF";

var restaurantMarker = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + restaurantColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));

var takeoutColor = "79CEFF";

var takeoutMarker = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + takeoutColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));

$('#category').change(function() {

    if ($(this).val() == 'restaurant') {

        for (i = 0; i < restaurant.length; i++) {
            marker = []
            marker = new google.maps.Marker({
            position: new google.maps.LatLng(restaurant[i][1], restaurant[i][2]),
            map: map,
            icon: restaurantMarker,
            shadow: markerShadow,
            animation: google.maps.Animation.DROP
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(restaurant[i][0]);
              infowindow.open(map, marker);
            };
          })(marker, i));
        }
    }

    if ($(this).val() == 'takeout') {

        for (i = 0; i < takeout.length; i++) {
            marker = new google.maps.Marker({
            position: new google.maps.LatLng(takeout[i][1], takeout[i][2]),
            map: map,
            icon: takeoutMarker,
            shadow: markerShadow,
            animation: google.maps.Animation.DROP
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(takeout[i][0]);
              infowindow.open(map, marker);
            };
          })(marker, i));
        }

    }

});

var restaurant = [
    ['<div class="restaurant"><strong>SoCo Southern Comfort</strong><br />509 Myrtle Ave. Brooklyn, NY 11205<br /> <a href="tel://718-783-1936">(718) 783-1936</a></div>', 40.693846,-73.964513, 1],

    ['<div class="restaurant"><strong>Black Swan</strong><br />1048 Bedford Ave. Brooklyn, NY 11205<br /><a href="tel://718-783-4744">(718) 783-4744</a></div>', 40.689128,-73.955187, 2]
];

var takeout = [
    ['<div class="take_out"><strong>Chan&#39;s Garden</strong><br />679 Myrtle Ave. Brooklyn, NY 11205<br /><a href="tel://718-875-6637">(718) 875-6637</a></div>', 40.694729,-73.956357, 1],

    ['<div class="take_out"><strong>New Hardee Chinese Restaurant</strong><br />835 DeKalb Ave. Brooklyn, NY 11221<br /><a href="tel://718-384-0338">(718) 384-0338</a></div>', 40.692559,-73.943021, 2]
];

Answer 1

I've looked at the documentation and it seems that the marker method .setMap(null) (Notice the null parameter) will remove the marker. Did you try this already ?

You said you already had removed a marker. How did you do this?

Answer 2

我遇到了类似的问题，目前无法查看代码以了解其解决方法，但是我记得我的临时解决方案是重绘地图，虽然不理想，但可能会有所帮助，将尝试获取该地图。完整的解决方案