Style Map by addng Map ID

[moneszarrugh]

I created a Map ID and added a style to it. But I couldn't get it to work. I tried using id prop and mapId but style doesnt change. Please cover this in the documentation on how to set a map id to change the map style.

Thanks

[JustFly1984]

I'm sure someone did that before successfully, can't really spare time for research now. If you succeed, please post your solution here. Official documentation usually helps. Ask questions in community or on slack.

[moneszarrugh]

I'm sure someone did that before successfully, can't really spare time for research now. If you succeed, please post your solution here. Official documentation usually helps. Ask questions in community or on slack.

I did research this problem quite a bit.

According to this https://stackoverflow.com/questions/62780394/how-do-i-change-the-mapid-of-a-google-vector-map
The author mentions passing mapId prop the the Map object.

But in the docs https://react-google-maps-api-docs.netlify.app/#googlemap
There is no mapId prop. Maybe that's why it's not passing down to google's official Map object.

I tried using the id prop but it had no affect.

[Kjagd]

As mentioned in #1443 the types are not up to date yet. Since this is essentially a configuration, I don't think we would have add any additional documentation here.

But be sure to use the beta channel and add the mapId to both the load script and the map element itself.

[moneszarrugh]

As mentioned in #1443 the types are not up to date yet. Since this is essentially a configuration, I don't think we would have add any additional documentation here.

But be sure to use the beta channel and add the mapId to both the load script and the map element itself.

I updated to the latest version and now it works! thanks.

[nathanaelphilip]

Full example if anyone else needs it.

<LoadScript
      googleMapsApiKey="API_KEY"
      mapIds={['d22d3e5e4ad3ba33']}
    >
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
        options={{ mapId: 'd22d3e5e4ad3ba33' }}
      >
        <Marker
          position={{ lat: 37.772, lng: -122.214 }}
        />
      </GoogleMap>
    </LoadScript>

[captDaylight]

I'm having an issue getting my styles to work when I try using hooks:

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

Error: Loader must not be called again with different options. 

However, when I comment out the mapIds line, it the display works (but no styles are attached).

[niccolosaurus]

@captDaylight Did you ever get this working for you? I am having the same issue and I have not been able to get it to work?