Previewing the New Detailed Map on Mobile

Using a new satellite color mapping technique, we’re able to deliver the more detailed and colorful experience that you see on the Google Maps app, website, and Google Maps Platform cloud-styled maps.

In May 2022, all surfaces and SDK versions will receive this new basemap by default, including maps loaded using the Maps SDKs for Android & iOS. For more information on the new detailed map, see our blog post.

If you currently customize your map using JSON-based styling and want to test out in advance how those styles will look with the new detailed map, you can use one of the options detailed below.

Previewing by creating a Map Style

If you are an existing user of JSON-based styling, we encourage you to migrate to using Cloud-based maps styling by converting your JSON style definition into a Map Style with the JSON style import tool.

When you create a new Map Style in the Google Cloud console, the style editor will display your custom style using the new detailed map. The renderer for the web-based map is the same as the one that will be used in the future to render the new detailed map on mobile, so you can feel confident that how your custom styling looks in the style editor is very close to how it will look when the new detailed map becomes the default on mobile.

Previewing in a mobile form factor

If you want to preview what your custom styling will look like in a mobile form factor, you can preview it with Device Mode in Chrome DevTools. Device Mode is the name for the loose collection of features in Chrome DevTools that help you simulate mobile devices, particularly within the mobile viewport.

To view your custom styling using Device Mode, convert your JSON-based styling to a Map Style and do the following:

  1. In the [Map Styles page] of the Google Cloud console, open your Map Style in the Style Editor, and click 'Customize Style'. The map will open in the Style Editor with your custom styling.

    customize map

  2. Open Chrome DevTools by selecting 'View' > 'Developer' > 'Developer Tools'. Chrome DevTools will open in the Google Chrome browser.

    chrome_devtools

  3. Open the map in fullscreen mode, by clicking the fullscreen icon on the map. The maps will open in fullscreen mode.

    fullscreen icon

  4. Click the Device Mode icon in Chrome DevTools. The map will be displayed in a mobile form factor. You can select different mobile form factors in the 'Dimensions' dropdown at the top of the browser window.

    device mode icon

device mode