Can't load map with custom styling with @react-google-maps/api

Question

I am using @react-google-maps/api and I have a custom map style. I have a map that uses the style, then I try to load it like this:

const API_KEY = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;
const MAP_ID = process.env.REACT_APP_GOOGLE_MAPS_MAP_ID;

const Map = () => {
    const { isLoaded } = useJsApiLoader({
        id: 'google-map-script',
        googleMapsApiKey: API_KEY,
        mapIds: [MAP_ID],
    });

    return (
        <Wrapper>
            <GoogleMap />
        </Wrapper>
   )
};

ReactDOM.render(<Map/>,document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-google-maps-api@1.0.8/lib/index.min.js"></script>
<div id='root'></div>

But the styles don't load, and I don't get any error messages from the JS, neither in the network tab. Am I missing a step, and how can I check if my map is the one being loaded

Note: The account has billing enabled and a credit card added so this is not caused by development only restrictions

Do **not** post images of code. Instead, provide a [mcve] in the question itself. Please read [ask]. — MrUpsidown, Jun 29 '22 at 09:17
@MrUpsidown I added the the snippet, but I can't give the keys to the account as it is not personal. I am looking for directions how to investigate whether the map is loading and if it is loading the styles — Valentin Tashkov, Jun 29 '22 at 10:59
I can't tell. It's still not reproducible. And according to the docs, `useJsApiLoader` does not have a `mapId` prop... — MrUpsidown, Jun 29 '22 at 11:11
My bad. It takes `mapIds`. It doesn't fix the problem. I actually passed it with `mapIds` initially and tested with mapId and forgot to change it back. The styles still don't load — Valentin Tashkov, Jun 29 '22 at 12:12
It [works for me](https://stackblitz.com/edit/react-ts-4c7md1?file=index.tsx). — MrUpsidown, Jun 29 '22 at 12:37
I saw the problem. When you said `Have you tried passing the mapId as a option?` I thought you mean prop, now I added it as `option` prop and it worked. Thanks a lot — Valentin Tashkov, Jun 29 '22 at 13:00

Valentin Tashkov · Answer 1 · 2022-06-29T13:05:45.337

1

The problem was that it has to be passed as a option to the GoogleMap component like that

<GoogleMap
    options={{ mapId: MAP_ID }}
>

Thanks @MrUpsidown, for proposing this solution

edited Jun 29 '22 at 13:05

answered Jun 29 '22 at 13:05

Valentin Tashkov

11
1
5

Can't load map with custom styling with @react-google-maps/api

1 Answers1