将搜索附近的侧板添加到自定义谷歌地图

我很难将Google Places API与Google Map API集成在一起。

我有以下自定义代码为自定义样式的地图工作。然而，我试图添加搜索附近餐馆、酒吧等的部分不起作用。我一直在关注并阅读本页上的文档https://developers.google.com/maps/documentation/javascript/places#TextSearchRequests试着去理解，这是有效的。我希望在我的地图上有真正的侧板。谢谢

 <script>
window.onload = function () {
    var styles = [
        {
            featureType: 'water',
            elementType: 'all',
            stylers: [
                { hue: '#7da6d3' },
                { saturation: 8 },
                { lightness: -13 },
                { visibility: 'on' }
            ]
        },{
            featureType: 'landscape.man_made',
            elementType: 'all',
            stylers: [
                { hue: '#ffffff' },
                { saturation: -100 },
                { lightness: 100 },
                { visibility: 'on' }
            ]
        },{
            featureType: 'road',
            elementType: 'all',
            stylers: [
                { hue: '#7e90ad' },
                { saturation: -78 },
                { lightness: -8 },
                { visibility: 'simplified' }
            ]
        },{
            featureType: 'poi.park',
            elementType: 'all',
            stylers: [
                { hue: '#83cca5' },
                { saturation: -3 },
                { lightness: -16 },
                { visibility: 'simplified' }
            ]
        },{
            featureType: 'poi.school',
            elementType: 'all',
            stylers: [
                { hue: '#dddddd' },
                { saturation: -100 },
                { lightness: 22 },
                { visibility: 'on' }
            ]
        },{
            featureType: 'poi.place_of_worship',
            elementType: 'all',
            stylers: [
                { hue: '#dddddd' },
                { saturation: -100 },
                { lightness: 11 },
                { visibility: 'simplified' }
            ]
        },{
            featureType: 'poi.business',
            elementType: 'geometry',
            stylers: [
                { hue: '#96A6C5' },
                { saturation: 16 },
                { lightness: -20 },
                { visibility: 'on' }
            ]
        },{
            featureType: 'transit',
            elementType: 'geometry',
            stylers: [
                { hue: '#7da6d3' },
                { saturation: 49 },
                { lightness: -12 },
                { visibility: 'on' }
            ]
        }
    ];
var options = {
    mapTypeControlOptions: {
        mapTypeIds: ['Styled']
    },
    center: new google.maps.LatLng(39.9534988, -75.1748003),
    zoom: 16,
    disableDefaultUI: false,
    mapTypeId: 'Styled'
};
var div = document.getElementById('googleMap');
var map = new google.maps.Map(div, options);
var building = {lat: 39.9534988, lng: -75.1748003};
var image = 'images/marker.jpg';
var marker = new google.maps.Marker({
    position: building,
    map: map,
    icon: image
});

var styledMapType = new google.maps.StyledMapType(styles, { name: '1919 Market' });
map.mapTypes.set('Styled', styledMapType);
}
var request = {
     location: building,
     radius: '500',
     query: 'restaurant'
 };
var service = new google.maps.places.PlacesService(map);
service.radarSearch(request, callback);

</script>