How to use "Cloud-based maps styling" in lib "@react-google-maps/api"

Question

I have a React code with . I created in console.cloud "Map styles" and mapId and linked them. Then I added the mapId to the code, but the styles didn't change.

render() {

return (
  <LoadScript
    mapIds={["xxxxxxxxxxxxx"]}
    // id="6e120bcd575d29f7"
    googleMapsApiKey="xxxxxxxxxxxxxxxxxxx"
  >
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={{
        lat: 50.751642333131244, 
        lng: 25.329876895818945
      }}
      zoom={17}
    >
           <Marker
            onLoad={this.onLoad}
            position={{
                lat: 50.7516779698738, 
                lng: 25.329030658899786
              }}
            />
    </GoogleMap>
  </LoadScript>
)

} }

Answer 1

To implement Cloud-based maps styling, you need to add the mapId in the Maps Javascript script tag's &map_ids= parameter and the map object mapId parameter. The code you have only adds the mapId in the Maps JavaScript script tag. To add the mapId in your map object parameter, you need to add the mapId option inside your object to implement this styling using the @react-google-maps/api library. See working sample code and code snippet below:

import ReactDOM from "react-dom";
import React from "react";

import {
  GoogleMap,
  LoadScript
} from "@react-google-maps/api";
const lib = ["places"];
const id = ["6e120bcd575d29f7"]
const key = ""; // PUT GMAP API KEY HERE
const defaultLocation = { lat: 40.756795, lng: -73.954298 };

class Map extends React.Component {
  render() {
    return (
      <div>
       <LoadScript googleMapsApiKey={key} libraries={lib} mapIds={id} >
        <GoogleMap
          center={defaultLocation}
          zoom={5}
          options={{ mapId: "6e120bcd575d29f7" }}
          mapContainerStyle={{ height: "400px", width: "800px" }}
        />
        </LoadScript>
      </div>
    );
  }
}