Error when adding a json style [#3548907]

Hi,

I'm having issue adding JSON style to the Google maps Common map. Not sure if I look over something or if I don't understand something, but here is the issue.

I have created a cloud map style with the corresponding map ID.

- I can't find a place to enter the custom map id so it takes over the styling.
- When adding the JSON map styles, I'm getting the following error

Google Maps JavaScript API: A Map's styles property cannot be set when a mapId is present. When a mapId is present, map styles are controlled via the cloud console. Please see documentation at https://developers.google.com/maps/documentation/javascript/styling#clou...

Question is. Is styling not supported in the 4.x branch or am I doing something completely wrong?

Comments

Comment #1

26 September 2025 at 11:45

dtrdewaele created an issue. See original summary.

Comment #2

hemangi.gokhale

she/her/hers

English

Portland, 🇺🇸

commented 13 January 2026 at 16:58

Yes, indeed, this is an issue. Using 4.x

[
{
  "variant": "light",
  "styles": [
    {
      "id": "infrastructure",
      "geometry": {
        "fillColor": "#ffffff",
        "strokeColor": "#9c9c9c"
      }
    },
    {
      "id": "infrastructure.roadNetwork",
      "geometry": {
        "fillColor": "#eeeeee"
      },
      "label": {
        "textFillColor": "#7b7b7b",
        "textStrokeColor": "#ffffff"
      }
    },
    {
      "id": "infrastructure.roadNetwork.road.highway",
      "geometry": {
        "visible": false
      }
    },
    {
      "id": "natural.land",
      "geometry": {
        "fillColor": "#f7f8f8"
      }
    },
    {
      "id": "natural.water",
      "geometry": {
        "visible": true,
        "fillColor": "#eeeeee"
      },
      "label": {
        "textFillColor": "#3a3a3a",
        "textStrokeColor": "#ffffff"
      }
    },
    {
      "id": "pointOfInterest",
      "geometry": {
        "visible": false
      }
    },
    {
      "id": "political",
      "label": {
        "textFillColor": "#3a3a3a"
      }
    }
  ]
}
]

The only info we're getting is in the console: Google Maps JavaScript API: A Map's styles property cannot be set when a mapId is present. When a mapId is present, map styles are controlled via the cloud console. Please see documentation at https://developers.google.com/maps/documentation/javascript/styling#clou...

Comment #3

flyke commented 10 April 2026 at 10:20

Comment #4

flyke commented 10 April 2026 at 11:29

I have created a patch that allows for overriding the mapId in the related issue. It does not (yet) have a UI setting for it, but I have included demo code there how you could alter the mapId via custom code (in a custom module, if the patch is applied).

I just want to note also that the json of maps style in the Google Cloud Console (thats V2) is different than the json of maps style that was used before, like in the geolocation commonmap settings (thats V1). I found this website that allows you to paste the JSON of old (V1) maps style which converts it to new (V2) maps style that you can use in Cloud Console.