How can I add custom pointer icon and change the map style

[shakil-brl]

HI, thanks for valuable work best wish for this team, I need little help at this point How can I add custom pointer icon and change the map style like gray map

[chungwwei]

I tried to setOptions in onLoad, but no style is shown. Does the library support style change? Couldn't find any information about it.

const onLoad = useCallback((map) => {
    const options = {
      styles: [
      { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
      { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
      { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
      {
        featureType: "administrative.locality",
        elementType: "labels.text.fill",
        stylers: [{ color: "#d59563" }],
      },
      {
        featureType: "poi",
        elementType: "labels.text.fill",
        stylers: [{ color: "#d59563" }],
      },
      {
        featureType: "poi.park",
        elementType: "geometry",
        stylers: [{ color: "#263c3f" }],
      },
      {
        featureType: "poi.park",
        elementType: "labels.text.fill",
        stylers: [{ color: "#6b9a76" }],
      },
      {
        featureType: "road",
        elementType: "geometry",
        stylers: [{ color: "#38414e" }],
      },
      {
        featureType: "road",
        elementType: "geometry.stroke",
        stylers: [{ color: "#212a37" }],
      },
      {
        featureType: "road",
        elementType: "labels.text.fill",
        stylers: [{ color: "#9ca5b3" }],
      },
      {
        featureType: "road.highway",
        elementType: "geometry",
        stylers: [{ color: "#746855" }],
      },
      {
        featureType: "road.highway",
        elementType: "geometry.stroke",
        stylers: [{ color: "#1f2835" }],
      },
      {
        featureType: "road.highway",
        elementType: "labels.text.fill",
        stylers: [{ color: "#f3d19c" }],
      },
      {
        featureType: "transit",
        elementType: "geometry",
        stylers: [{ color: "#2f3948" }],
      },
      {
        featureType: "transit.station",
        elementType: "labels.text.fill",
        stylers: [{ color: "#d59563" }],
      },
      {
        featureType: "water",
        elementType: "geometry",
        stylers: [{ color: "#17263c" }],
      },
      {
        featureType: "water",
        elementType: "labels.text.fill",
        stylers: [{ color: "#515c6d" }],
      },
      {
        featureType: "water",
        elementType: "labels.text.stroke",
        stylers: [{ color: "#17263c" }],
      },
    ],
    }
    map.setOptions(options);
    setMap(map)
  }, [])

[JustFly1984]

@chungwwei please provide minimal reproduction in codesandbox.io

[samfrank]

For the custom style the <GoogleMap /> component has an options prop which you can utilise.

You can utilise this by doing something like <GoogleMap options={{ styles: GOOGLE_MAP_STYLE }} />.

[Munir-Hassan]

For the custom style the <GoogleMap /> component has an options prop which you can utilise.

You can utilise this by doing something like <GoogleMap options={{ styles: GOOGLE_MAP_STYLE }} />.

You can go here in this link.https://mapstyle.withgoogle.com/ and choose legacy json formator. then select the theme of your choice and copy the json and then that in styles. Hope this helps.