> ## Content Index > Fetch the complete content index at: https://blog.afi.io/llms.txt > Use this file to discover other available public pages before exploring further. # Style a Google Map any way you want - URL: https://blog.afi.io/blog/style-a-google-map-any-way-you-want/ - Published: 2026-05-10T02:09:21.000Z - Updated: 2026-08-21T05:10:12.000Z - Author: Afian Anwar Tired of the default Google Maps look? This tutorial series walks you through how to style a Google Map and any datasets that you bring into it. By the end, you'll have full creative control over your map's appearance, moving beyond the standard interface to something that perfectly fits your brand and use case. ![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2026/05/image-12.png) **Part 1: Style a Google Map any way you want (this article)** Part 2: [Apply styles for Google Maps using JSON style arrays](https://blog.afi.io/blog/apply-styles-for-google-maps-using-json-style-arrays/) Part 3: [Cloud based map styling for Google Maps](https://blog.afi.io/blog/cloud-based-map-styling-for-google-maps/) Part 4: [Google Maps data driven styling for boundaries](https://blog.afi.io/blog/google-maps-data-driven-styling-for-boundaries/) Part 5: [Create a heatmap in Google Maps with data driven styling](https://www.afi.io/blog/create-a-heatmap-in-google-maps-with-data-driven-styling/?ref=blog.afi.io) Part 6: [Upload and style datasets using the Maps Datasets API](https://www.afi.io/blog/upload-and-style-datasets-using-the-maps-datasets-api/?ref=blog.afi.io) Part 7: [Add data to Google Maps with data driven styling](https://afi.io/blog/add-data-to-google-maps-with-data-driven-styling/?ref=blog.afi.io) ### Three ways to style a Google Map The default Google Map style (updated in March 2025) is a clean, bright, enterprise look built around a few core color choices: ![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2026/05/Screenshot-2026-05-03-at-12.42.14---PM.png) - **Land/landscape**: light beige or off-white (`#f5f5f5`\-ish) - **Water**: light blue (`#aadaff` or similar) - **Roads**: white for local streets, yellow/orange for highways, with darker outlines - **Parks and green spaces**: light green (`#DAF6E2`) - **Buildings**: light gray with subtle 3D extrusions at higher zoom levels This works for most apps, but sticking with the defaults means your map looks like everyone else's. To give it some personality (or to hide map features such as restaurants and businesses that might clutter your map), you have three main options: 1. Use a JSON styles array, 2. Apply cloud based map styling in the Google Cloud Console or, 3. Switch between Google's built in map types, navigation options and controls. **Using a JSON styles array** ![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2026/05/Screenshot-2026-05-09-at-6.24.24---PM.png) My favorite way to style a Google Map is by passing in a JSON array of style rules directly in your code. Each rule targets a map feature (roads, water, landscape) element (geometry, labels) or styler (color, visibility, weight). For example, the JSON sample below keeps point of interest and place labels to a minimum: ``` [ { "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.land_parcel", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.neighborhood", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi.business", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "stylers": [ { "visibility": "off" } ] } ] ``` Its simple, easy to implement and you get immediate feedback about what elements have changed each time you refresh the map. There's also a wide variety of third party websites such as [Snazzy Maps](https://snazzymaps.com/?ref=blog.afi.io) and [Mapstyle](https://mapstyle.withgoogle.com/?ref=blog.afi.io) (Google's own styling wizard) that provide pre-built JSON styles you can drop in or customize. These are useful starting points if you don't want to build from scratch. **Cloud based map styling** ![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2026/05/Screenshot-2026-05-09-at-6.30.51---PM.png) Cloud based map styling is Google's preferred way to style a Google Map. You create and manage styles in the Google Cloud Console, then reference them via a Map ID in your code. This approach lets you reuse the same style across different apps and generally results in less verbose code because you don't have to deal with a bloated styles array. The downside is that each new style needs to be built from scratch which might take a while even with the help of the cloud based map styling UI. **Map type options** ![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2026/05/Screenshot-2026-05-09-at-6.38.45---PM.png) If you are happy with how the default base map looks but just want to change how information is displayed, you can use the `mapOptions` configuration object. At a high level, `mapOptions` gives you three main levers for styling a Google Map. 1. You can pick a base look with `mapTypeId` (`ROADMAP`, `SATELLITE`, `HYBRID`, or `TERRAIN`) and `colorScheme` (`LIGHT`, `DARK`, or `FOLLOW_SYSTEM`) for zero effort changes, 2. You can shape the viewport with `center`, `zoom`, `heading`, `tilt`, `minZoom`, `maxZoom`, and `restriction` to control what users see and how far they can move, 3. And you can strip down or reconfigure the UI with individual control toggles (`zoomControl`, `fullscreenControl`, `streetViewControl`). In my experience, I've found that the most useful UI element to add is `mapTypeControl`. Setting it to `true` gives you users a UI to switch between the four default base layers: 1. `roadmap` the default street map, 2. `satellite` satellite imagery or high resolution photos taken from planes, 3. `hybrid` satellite imagery with roads and labels, 4. `terrain` topographic features with contour lines You can also change which map controls are displayed and where by altering appropriate control *options* fields within the `MapOptions` object upon creation of the map like so: ``` innerMap.setOptions({ mapTypeControl: true, mapTypeControlOptions: { style: MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [MapTypeId.ROADMAP, MapTypeId.TERRAIN], position: ControlPosition.TOP_LEFT, }, }); ``` If you are using the [@vis.gl/react-google-maps](https://visgl.github.io/react-google-maps/?ref=blog.afi.io) library (and you should), you don't need to pass a separate `MapOptions` object. The library spreads the options out as individual props on the `` component. So instead of one config object, each property becomes its own prop. ``` ``` Full documentation for the `MapOptions` interface can be found [here](https://developers.google.com/maps/documentation/javascript/reference/map?ref=blog.afi.io#MapOptions). ### Google Maps pricing Applying styles to a Google Map is free, but loading a Google Map triggers the [Dynamic Maps SKU](https://developers.google.com/maps/billing-and-pricing/sku-details?ref=blog.afi.io#dynamic-maps-ess-sku). Each map load costs $7 CPM ($7 per 1,000 so $0.007 per load) but there is a generous free tier of 10,000 map loads per month so most websites and apps pay nothing at all. Beyond that, pricing is tiered according to the following schedule: | **0 - 10k** | **10k - 100k** | **100k - 500k** | **500k - 1M** | **1M - 5M** | **5M+** | | | ------------ | -------------- | --------------- | ------------- | ----------- | ------- | ----- | | Dynamic Maps | FREE | $7.00 | $5.60 | $4.20 | $2.10 | $0.53 | ### What you'll learn in this tutorial series In this tutorial series, I'll show you how to build a production Google Map with your own data and styling on it. Specifically, I'll explain: - The difference between [Cloud Based Map Styling](https://mapsplatform.google.com/resources/blog/introducing-latest-cloud-based-maps-styling/?ref=blog.afi.io) (styling Google's base map) and [data driven styling](https://mapsplatform.google.com/resources/blog/introducing-data-driven-styling/?ref=blog.afi.io) (styling features on top of it), - How to use the [Google Cloud Console](http://console.cloud.google.com/?ref=blog.afi.io) to manage the relationship between maps, styles and datasets, - How to import data into your map using either a manual upload or the (hardly ever used) [Maps Datasets API](https://developers.google.com/maps/documentation/datasets/overview?ref=blog.afi.io), - The basics of styling line, point and polygon datasets and, - The difference between [data driven styling for boundaries](https://developers.google.com/maps/documentation/javascript/dds-boundaries/overview?ref=blog.afi.io) (which uses Google's built in boundary data) and [data driven styling for datasets](https://developers.google.com/maps/documentation/javascript/dds-datasets/overview?ref=blog.afi.io) (where you upload your data to Google Cloud). Each section is grounded in real, runnable code. You'll build a working example with real world datasets as you go. **This article was written by** [**Afi Labs**](https://afi.io/?ref=blog.afi.io)**, a** [**Google Maps Premier Partner**](https://www.afi.io/?ref=blog.afi.io) **and reseller. We build route optimization, navigation, and fleet tracking software on Google Maps, and offer volume pricing on GMP licensing.** [**Talk to an engineer**](https://www.afi.io/contact%5Fus?ref=blog.afi.io) **or** [**follow Afian on LinkedIn**](https://www.linkedin.com/in/afian-anwar/?ref=blog.afi.io)**.** Next: [Part 2: Apply styles for Google Maps using JSON style arrays](https://blog.afi.io/blog/apply-styles-for-google-maps-using-json-style-arrays/)