Previewing the New Detailed Map on Mobile
Stay organized with collections
Save and categorize content based on your preferences.
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.
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:
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.
Open Chrome DevTools by selecting 'View' > 'Developer' > 'Developer Tools'. Chrome DevTools will open in the Google Chrome browser.
Open the map in fullscreen mode, by clicking the fullscreen icon on the map. The maps will open in fullscreen mode.
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.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-08-27 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-27 UTC."],[[["\u003cp\u003eGoogle Maps is introducing a new detailed and colorful basemap using a satellite color mapping technique.\u003c/p\u003e\n"],["\u003cp\u003eThis new basemap will be the default across all platforms and SDKs by May 2022.\u003c/p\u003e\n"],["\u003cp\u003eExisting users who customize their maps with JSON styling can preview how their styles will look with the new basemap using Cloud-based map styling or Device Mode in Chrome DevTools.\u003c/p\u003e\n"]]],[],null,["# Previewing the New Detailed Map on Mobile\n\nUsing 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.\n\nIn 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](https://mapsplatform.google.com/resources/blog/bring-your-map-life-enhanced-natural-features).\n\nIf 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.\n\nPreviewing by creating a Map Style\n----------------------------------\n\nIf 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](/maps/documentation/javascript/styling#creating_map_styles).\n\nWhen 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.\n\nPreviewing in a mobile form factor\n----------------------------------\n\nIf you want to preview what your custom styling will look like in a mobile form factor, you can preview it with [Device Mode](https://developer.chrome.com/docs/devtools/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.\n\nTo view your custom styling using Device Mode, convert your JSON-based styling to a Map Style and do the following:\n\n1. 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.\n\n2. Open Chrome DevTools by selecting 'View' \\\u003e 'Developer' \\\u003e 'Developer Tools'. Chrome DevTools will open in the Google Chrome browser.\n\n3. Open the map in fullscreen mode, by clicking the fullscreen icon on the map. The maps will open in fullscreen mode.\n\n4. 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."]]
