I created a site that might be exactly what you are looking for:

http://snazzymaps.com

It's a repository for Google Maps color schemes with JSON code and downloadable examples. There are only a few styles up now that I've created myself but I just whipped up the site over the last week so it's still pretty new!

You are confusing the JSON to style a map which is what you get out of the Map Styling Wizard and the GeoJSON used by the data layer

They go in different places and do different things. To style the map, put the "style" data in the MapOptions styles property.

The data layer is used for displaying geographic information on the map (markers, polygons, polylines,...), not styling the map tiles.

Working code snippet with your map styles (if you want to load them from an external file, you can, but you wouldn't use the data layer, you would just assign the styling data to a global variable and use that for the styles property):

var map;

function initialize() {
  // Create a simple map.
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 16,
    center: {
      lat: 53.668398,
      lng: -2.167713
    },
    styles: [{
      "featureType": "landscape",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#ffffff"
      }]
    }, {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [{
        "color": "#efefef"
      }]
    }, {
      "featureType": "water",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road",
      "elementType": "geometry.stroke",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#dedddd"
      }]
    }, {
      "featureType": "road",
      "elementType": "geometry.fill",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#efefef"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "on"
      }]
    }]
  });

  // Load a GeoJSON from the same server as our demo.
  //map.data.loadGeoJson('http://pixelsandcode.local:5757/map.json');
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

I’ve documented a hacky workaround here: https://youtu.be/YyuyqPVQNrs?si=ZFedWYWuOXeEnedi

In short:

1. make a single edit via the UI and submit it
2. use chrome dev tools to capture the cURL command of this request
3. modify the cURL command to include template styling from https://github.com/alex-wilson-gwf/gmapsjson/tree/main/v3
4. send the modified cURL command using postman.co

Thanks for the idea Paul LeBeau! I can suggest an improvement to your process, using the browser dev tools console to help with parsing. I've copied your first 8 steps for ease of the next person. This process seemed to work for me (was able to import the style to another project, and it seems to have the desired styling). Note I am also using Chrome (other browser's dev tools may be different).

• Go to the Google Maps dashboard map style editor

• Choose one of their example styles, or import your current map style JSON.dev

• Make any changes you need.

• Open the browser dev tools for that window (cmd-shift-J on Chrome on Mac)

• Switch to the Network tab, and select "Fetch/XHR" (for Chrome - other browsers are similar)

• You might find the next step easier if you clear the tab (with the button)

• Click "Save"/"Save and publish" on the map style editor page.

• Look for a POST request in the dev tools network tab to this URL: https://cloudconsole-pa.clients6.google.com/v3/entityServices/MapsMapsstylingEntityService/schemas/MAPS_MAPSSTYLING_ENTITY_SERVICE_GQL_TRANSPORT

• NOTE from here onward this is where my process differs from Paul LeBeau

• Click the Payload tab

• Expand "Request Payload" one level (if not already expanded)

• Right-click on the JSON content (starts with "{requestContext:")

• Choose "Copy value"

• In the Console window of dev tools, begin an assignment statement (but do NOT yet hit return):

  • origRequest =

• Paste the value you copied directly on to that assignment statement

• Add a semi-colon ; and hit return. Now the request payload is in a valid JavaScript variable that you can utilize like any other.

• To get the "rules" field (as described by @paul-lebeau), without the need to manipulate any escaped quotes, enter this command in the console window:

• copy(JSON.stringify(JSON.parse(origRequest.variables.clientStyle.draftJsonEncodedStyleSheet).rules,0,2))

  • or publishedJsonEncodedStyleSheet if you clicked publish above

The rules JSON is now in your paste buffer. You can paste it into the editor of your choice if you want to adjust it further, or you can paste it directly into the "Import JSON" text area of the Google Maps Style editor (which in my case worked without need of any adjustment).

Also note that adjustments can be made in that console window too, if you prefer to work with the parsed JSON object. To do that, create the origRequest object as described above, then:

• rules = JSON.parse(origRequest.variables.clientStyle.draftJsonEncodedStyleSheet).rules;
• Manipulate the "rules" javascript object as desired, then:
• copy(JSON.stringify(rules,0,2))