Export Map Style from Google Maps Platform

Question

Google have decided to replace their Map Style tool with the Cloud-base Maps Styling.

The new Beta tool allows you to import JSON map styling, but it provides no way of exporting a map style created with the Beta tool.

A colleague of mine has created a custom Map Style, but now we need to copy it into another project, but there appears no way to do this. We can duplicate the style, but only into the same project.

Is there any way around this, eg. a GCP console command.

I've tried inspecting the network traffic to see if I can grab the config, but it's in a completely different format that can't be exported.

Edit: It may appear I've done no research on this question, but the fact is that because it's referring to a Beta GCP tool, there is very little information available on its use other than:

• A blog post
• A sidebar which concentrates on the publishing side
• All the Maps API docs refer to using a Map ID, which isn't the problem here.

Another Edit:I've created an feature request, in case anyone is interested...

Answer 1

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

Answer 2

I have found a workaround to get the JSON from the style editor.

• Go to the Google Maps dashboard map style editor

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

• Make any changes you need.

• Open the browser dev tools for that window (F12)

• 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 a URL like this: https://cloudconsole-pa.clients6.google.com/v3/entityServices/MapsMapsstylingEntityService/schemas/MAPS_MAPSSTYLING_ENTITY_SERVICE_GQL_TRANSPORT, and click on it.

• Copy the request payload from the Response tab, and paste it into a text editor.

• In this JSON, look for the "rules" property and copy its value out.

This is the map style JSON that you need to style your map.

I had to do a little cleanup. For example I had to find and replace the escaped quote characters (ie. \" to ").

Plus the map style rules didn't look exactly the same in my app as they did in the editor. I'm not sure why. Perhaps the editor has some default rules that are not in the submitted JSON. So you might need to do a little bit of style tweaking.

However, in my case, I just needed a couple of rules from this JSON to finish the styling of my map. There were a couple of features I couldn't seem to get working properly. And being able to copy the relevant rules from the editor JSON solved my problem.