Javascript 谷歌地图反应填充多个标记

我目前正在尝试使用map函数用标记填充我的谷歌地图。我似乎找不到任何东西来填充。是否存在我不理解的限制或我遗漏了什么？我尝试用更简单的东西替换FontAwesomeIcon，但它无法渲染。如果在GoogleMapReact组件中多次复制paste FontAwesomeIcon，它似乎可以工作，但我似乎无法使它与map一起工作。如有任何建议，将不胜感激

render() {
        const {center, zoom} = this.props;

        const listingPins = this.props.testList.map((listing, index) => {
            console.log(listing);
            if (listing.coordinates.lat === null || listing.coordinates.lng === null){
                return null
            } else{
                return <FontAwesomeIcon icon={faHome} size={"2x"} key={index} listing={listing} lat={listing.coordinates.lat} lng={listing.coordinates.lat} />
            }
        });
        console.log("TEST");
        console.log(listingPins);

        return (
            <div style={{ height: '100vh', width: '100%' }}>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: "key" }}
                    center={center}
                    zoom={zoom}
                >
                    {listingPins}
                </GoogleMapReact>
            </div>
        );
    }

render（）{
const{center，zoom}=this.props；
const listingPins=this.props.testList.map（（列表，索引）=>{
console.log（列表）；
if（listing.coordinates.lat==null | | listing.coordinates.lng==null）{
返回空
}否则{
返回
}
});
控制台日志（“测试”）；
console.log（listingPins）；
返回(
{listingPins}
);
}

要在地图上显示多个标记，您必须将标记数组作为子元素传递给GoogleMapReact组件，并在其上进行映射

return (
        <div style={{ height: '100vh', width: '100%' }}>
          <GoogleMapReact>
             {props.listingPins.map(pin => (
               <Marker
                  position={{ lat: pin.latitude, lng: pin.longitude }}
                  key={pin.id}
               />
             ))}
          </GoogleMapReact>
        </div>
     );

返回(
{props.listingPins.map（pin=>(
))}
);

似乎不起作用。。仍然显示一张空地图。不确定出了什么问题，因为如果我打印出标记，它似乎有正确的信息。

const createMarker = ({ map, maps }: Mapprops) => {
    const markers = props.listingPins.map(data => {
      return new maps.Marker({ position: data });
    });
  };
<GoogleMapReact
   bootstrapURLKeys={{ key: "key" }}
   center={center}
   zoom={zoom}
   onGoogleApiLoaded={createMarker}
   >
</GoogleMapReact>

data: {
    lat: number
    lng: number
    }