mapId-Prop for cloudbased styles?

[dummaso]

In case anyone else faces this challenge: take a look at this example on StackOverflow.

You first need to load the style in your LoadScript-component by listing it in its mapIds-prop and then refer to it from within your GoogleMap-component via the options-prop.

The example from the link above:

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>
    );
  }
}

[coreyar]

It seems this issue is out of date. The library has been rewritten in favor of hooks. The custom styles are not being styled correctly when the mapIds are included in the useJsApiLoader hook.

You can still make this work by calling setMapId on the onLoad map callback.