Is there a way to apply JSON based styles while using AdvancedMarkers?

[MauricioRobayo]

When adding a mapId the JSON based styles stop working.

This works:

<Map
  zoom={zoom}
  center={position}
  disableDefaultUI
  styles={twoToneWithLabels} // https://snazzymaps.com/style/1861/two-tone-with-labels
>
  <Marker
    position={position}
    icon={{
      url: "/images/map-marker.png",
      scaledSize: { width: 18.14, height: 23.21 },
    }}
  />
</Map>;

When adding a mapId the styles applied through the styles prop stop working:

<Map
  zoom={zoom}
  center={position}
  disableDefaultUI
  styles={twoToneWithLabels} // https://snazzymaps.com/style/1861/two-tone-with-labels
+ mapId="123"
>
  <Marker
    position={position}
    icon={{
      url: "/images/map-marker.png",
      scaledSize: { width: 18.14, height: 23.21 },
    }}
  />
</Map>;

I'm assuming this is expected behavior, by using a mapId we are supposed to use cloud based styling so the styles prop is ignored.

Is my assumption correct?

If so, is there a way to use JSON based styles while still using a mapId?

[shuuji3]

I'm not sure if this can solve your current issue, but you can convert the existing JSON styling to Cloud-based styling by following the steps described in this docs: https://developers.google.com/maps/documentation/maps-static/cloud-customization/map-styles#import-json-styling

Then, you can use mapId to set the desired map style instead of using the JSON one.

Sample screenshot

Here's the preview converted from the JSON at https://snazzymaps.com/style/1861/two-tone-with-labels

[MauricioRobayo]

that's very useful, I've seen that before, but unfortunately I don't have the import JSON option, neither on my personal account nor in the company's account for which I have to set this up. ¯\(ツ)/¯

Did you do anything special to enable it @shuuji3 ? I'm guessing it might have been removed in favor of the new styles editor or something, and there doesn't seem to be a way to go back to that previous style editor with the import JSON option.

[shuuji3]

It seems that I can see this option because I didn't opt in the new styles editor. Unfortunately, this JSON import feature is available only in the legacy styles editor, so as far as I know the only option is to opt out of the new editor: https://developers.google.com/maps/documentation/cloud-customization/legacy-overview

[MauricioRobayo]

Thanks again @shuuji3 ! the Opt Out option is not anywhere on any of the accounts I have access to.

I guess if that was the only way to still use JSON based styles, it is being removed and JSON based styles are no longer being supported in any way, and no way to migrate unless you have access to the old style editor. :(

[MauricioRobayo]

This works:

"use client";

import { APIProvider, Map, useMap } from "@vis.gl/react-google-maps";
import { useEffect } from "react";

const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? "";
const mapId = process.env.NEXT_PUBLIC_GOOGLE_MAPS_MAP_ID ?? "";

export default function Page() {
  return (
    <div className="h-screen w-full">
      <APIProvider apiKey={apiKey}>
        <StyledMap />
      </APIProvider>
    </div>
  );
}

function StyledMap() {
  const map = useMap();
  useEffect(() => {
    if (!map) return;
    const styledMapType = new google.maps.StyledMapType(twoToneWithLabels); // https://snazzymaps.com/style/1861/two-tone-with-labels
    map.mapTypes.set("styled_map", styledMapType);
    map.setMapTypeId("styled_map");
  }, [map]);
  return (
    <Map
      zoom={14}
      center={{ lat: 47.608013, lng: -122.335167 }}
      mapId={mapId}
    />
  );
}

Taken from here.