copper obsidian
I am using @react-google-maps on a CRA app like this:
const mapOptions = {
maxZoom: 20,
otherstuff: ""
}
return (
<GoogleMap
center={fallbackPosition}
zoom={7}
id="map"
options={MapOptions}
>
<Marker icon={currentPositionIcon} position={location} />
</GoogleMap>
)
This generates the map shown in image 1 [cropped] EDIT: I think the images may have flipped when uploading. Instead of image one, it is the image where the map details can be seen, eg Spring Hill.
I try the exact code in Remix, but map details are not shown. This is shown in image 2. The map also renders as partially transparent so the background can be seen
I am using the same API key & no errors register in the Google Maps console, the browser console, or the server logs so I am not sure how to start debugging. I suspected it might be a weird hydration error since the library might use window under the hood, so I tried using import { ClientOnly } from "remix-utils"; but that had no change
The way I used this component was like this:
return (<GoogleMap
center={fallbackPosition}
zoom={7}
id="map"
options={MapOptions}
>
<ClientOnly>{() => <Marker icon={currentPositionIcon} position={location} />}</ClientOnly>
</GoogleMap>)
Any help would be greatly appreciated.
thorn silo
