Google maps 谷歌附近更改点击类型

我正在做一个项目，我想在谷歌地图上展示choosen事件以及一些附加信息。（例如，半径为2km的所有加油站）。 谷歌不允许在附近搜索多个类型

将结果限制在与指定类型匹配的位置。只能指定一种类型（如果提供了多个类型，则忽略第一个条目后面的所有类型）

所以现在，如果我点击我添加的自定义按钮，我想改变类型（例如加油站或商店）。 （使用谷歌文档示例）

截图：

问题：

---

更改类型并使用新信息刷新地图的最佳方法是什么？

我想向您介绍我们的解决方案。 我们编写了一个clear（）和showType（）函数，它将删除所有标记，并让正确的标记在单击时显示。顺便说一下，我们为按钮提供了一个名为“selected”的状态类，用于CSS样式

我们没有找到一个解决方案来同时显示（清洗站和加油站）

var映射；
var信息窗口；
var服务；
var eventLocation={lat:，lng:}；
var标记=[]；
var wash=document.getElementById（'wash'）//清洗按钮
var fuel=document.getElementById（'fuel'）//加油站按钮
函数initMap（）{
map=new google.maps.map（document.getElementById（'eventmap'）{
中心：活动地点，
缩放：13，
});
infowindow=new google.maps.infowindow（）；
服务=新的google.maps.places.PlacesService（地图）；
展示类型（“加油站”）；
fuel.classList.add（“选定”）；
打字控制（地图）；
}
//类型控制功能
功能类型控制（map）{
google.maps.event.addDomListener（fuel，'click'，function（）{
wash.classList.remove（“选定”）；
fuel.classList.remove（“选定”）；
清除（）
显示类型（“加油站”）
此.classList.add（“选定”）；
});
google.maps.event.addDomListener（wash，'click'，function（）{
wash.classList.remove（“选定”）；
fuel.classList.remove（“选定”）；
清除（）
showType（“洗车店”）
此.classList.add（“选定”）；
});
}
函数showType（类型）{
服务，近距离搜索({
地点：eventLocation，
半径：10000，
类型：[类型]
}，回调）；
}
函数clear（）{
markers.forEach（marker=>marker.setMap（null））；
标记=[]；
}
函数回调（结果、状态）{
清除（）
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i地址：”+place.neighborary）；
打开（地图，这个）；
});
}

<script type="text/javascript">
    var map;
    var infowindow;
    var service;
    var eventLocation = {lat: <?= $arrCoordinates['latitude']?>, lng: <?= $arrCoordinates['longitude']?>};
    var markers = [];
    var wash = document.getElementById('wash'); //washbutton
    var fuel = document.getElementById('fuel'); //fuelstation button

    function initMap() {
        map = new google.maps.Map(document.getElementById('eventmap'), {
            center: eventLocation,
            zoom: 13,
        });

        infowindow = new google.maps.InfoWindow();
        service = new google.maps.places.PlacesService(map);
        showType('gas_station');
        fuel.classList.add("selected");


        typeControl(map);
    }

    // Type control function
    function typeControl ( map ) {

        google.maps.event.addDomListener(fuel, 'click', function() {
            wash.classList.remove("selected");
            fuel.classList.remove("selected");
            clear()
            showType('gas_station')
            this.classList.add("selected");   
        });

        google.maps.event.addDomListener(wash, 'click', function() {
            wash.classList.remove("selected");
            fuel.classList.remove("selected");
            clear()
            showType('car_wash')
            this.classList.add("selected");
        });
    }

    function showType(type) {    
        service.nearbySearch({
            location: eventLocation,
            radius: 10000,
            type: [type]
        }, callback);
    }
    function clear() {
        markers.forEach(marker => marker.setMap(null));
        markers = [];
    }

    function callback(results, status) {
        clear()
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }
            createTuningEventMarker();
        }
    }

    function createTuningEventMarker(place) {
        var eventLocation = {lat: <?= $arrCoordinates['latitude']?>, lng: <?= $arrCoordinates['longitude']?>};
        var eventIcon = {
          url: 'https://www.foo.lol/img/icons/pin.svg',
          // This marker is 20 pixels wide by 32 pixels high.
          scaledSize: new google.maps.Size(60, 60),
          // The origin for this image is (0, 0).
          origin: new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at (0, 32).
          anchor: new google.maps.Point(30,60)
        };

        var marker = new google.maps.Marker({
            map: map,
            icon:eventIcon,
            position: eventLocation
      });

      google.maps.event.addListener(marker, 'click', function() {

        infowindow.setContent('<?= $event['name']?>');
        infowindow.open(map, this);
      });
    }

        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });
        markers.push(marker);

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(place.name + "<br>Adress: " + place.vicinity);
            infowindow.open(map, this);
        });
    }

</script>