如何使用google-maps-api从json添加多个标记？

Question

我想从Google地图上的json加载多个标记。问题是我的map函数仅呈现json中的最后一个元素。

我尝试修改json中的数据，尝试添加带有lat和lng的多个标记，但无法显示它们。

App.js

function Map(){
const [selectedHospital,setSelectedHospital] = useState(null);

 return(

  <GoogleMap
  defaultZoom={15}
  defaultCenter={{ lat:46.774075,lng:23.607754}}
  >

      {hospitalData.places.map((h) =>(
          <Marker key={h.id}
                  position={{
                       lat:parseFloat(h.latitude),
                      lng:parseFloat(h.longitude)

                  }}
                  onClick={()=>{
                      setSelectedHospital(h);
                  }}
          />
      ))}

      {selectedHospital && (
          <InfoWindow
              position={{
                    lat:parseFloat(selectedHospital.latitude),
                  lng:parseFloat(selectedHospital.longitude)
              }}
          onCloseClick={() => {
              setSelectedHospital(null);
          }}
          >
              <h2>{selectedHospital.name}</h2>
          </InfoWindow>
      )}

  </GoogleMap>


)
}

const MapWrapped = withScriptjs(withGoogleMap((Map)));

    function App() {
  return (
      <div style={{ width: "75vw", height: "75vh" }}>

      <MapWrapped
        googleMapURL={"https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&s&key=API_KEY&sensor=false"}
             loadingElement={<div style={{height: "100%"}} />}
            containerElement={<div style={{height: "100%"}} />}
            mapElement={<div style={{height: "100%"}} />}
    />
    </div>
  );
}

data.json

{
  "places":
[
  {
"id": 1,
"name": "X",
"lat": 46.772171,
"lon": 23.602716
  },
  {
"id": 2,
"name": "Y",
"lat": 46.771040,
"lon": 23.605290
  },
  {
"id": 3,
"name": "Z",
"latitude": 46.769034,
"longitude": 23.602643
  }
]
}

我应该更改json格式还是我的地图方法？