Blank screen in react-google-maps streetview - reactjs

Question

About 50% of the time, the StreetViewPanorama shows up as a blank screen depending on the coordinates. Is there a way to check to see if the screen will show up blank before I decide to show the street view? If it will, then I would just like to show the regular map
const StreetView = withScriptjs(
withGoogleMap(props => {
const { coordinates, address, city, state, zip } = props;
return (
<GoogleMap
defaultZoom={14}
defaultCenter={{
lat: coordinates[1],
lng: coordinates[0],
}}
>
<StreetViewPanorama
defaultPosition={{
lat: coordinates[1],
lng: coordinates[0],
}}
visible
/>
</GoogleMap>
);
}),
);
export default props => {
return (
<StreetView
{...props}
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&libraries=visualization`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `800px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
);
};

Answer 1

Google has an endpoint to check for valid coordinates. You can use a ternary to check the status and render a marker if the Street View doesn't exist.
const StreetView = withScriptjs(
withGoogleMap(props => {
const { coordinates, address, city, state, zip } = props;
const [streetView, setStreetView] = useState(null);
axios
.get(
`https://maps.googleapis.com/maps/api/streetview/metadata?key=${GOOGLE_API_KEY}&location=${
coordinates[1]
},${coordinates[0]}`,
)
.then(resp => setStreetView(resp.data.status));
return (
<GoogleMap
defaultZoom={14}
defaultCenter={{
lat: coordinates[1],
lng: coordinates[0],
}}
>
{streetView === 'OK' ? (
<StreetViewPanorama
defaultPosition={{
lat: coordinates[1],
lng: coordinates[0],
}}
visible
/>
) : (
<></>
)}
</GoogleMap>
);
}),
);
export default props => {
return (
<StreetView
{...props}
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&libraries=visualization`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `800px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
);
};