This page is a quick guide to stying your map, using night mode as an example.

Overview
With style options you can customize the presentation of the standard Google
map styles, changing the visual display of features like roads, parks,
businesses, and other points of interest. This means that you can emphasize
particular components of the map or make the map complement the style of your
app.
Styling works only on the kGMSTypeNormal
map type.
Apply styles to your map
To apply custom map styles to a map, call GMSMapStyle(...)
to create a
GMSMapStyle
instance, passing in a URL for a local JSON file, or a JSON
string containing style definitions. Assign the GMSMapStyle
instance to the
mapStyle
property of the map.
Use a JSON file
The following examples show calling GMSMapStyle(...)
and passing a URL for a
local file:
Swift
The following code sample assumes your project contains a file named
style.json
:
import UIKit
import GoogleMaps
class ViewController: UIViewController {
// Set the status bar style to complement night-mode.
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}
override func loadView() {
let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
do {
// Set the map style by passing the URL of the local file.
if let styleURL = Bundle.main.url(forResource: "style", withExtension: "json") {
mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)
} else {
NSLog("Unable to find style.json")
}
} catch {
NSLog("One or more of the map styles failed to load. \(error)")
}
self.view = mapView
}
}
Objective C
The following code sample assumes your project contains a file named
style.json
:
#import "ViewController.h"
@import GoogleMaps;
@implementation ViewController
// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
return UIStatusBarStyleLightContent;
}
- (void)loadView {
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
longitude:151.20
zoom:12];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
mapView.myLocationEnabled = YES;
NSBundle *mainBundle = [NSBundle mainBundle];
NSURL *styleUrl = [mainBundle URLForResource:@"style" withExtension:@"json"];
NSError *error;
// Set the map style by passing the URL for style.json.
GMSMapStyle *style = [GMSMapStyle styleWithContentsOfFileURL:styleUrl error:&error];
if (!style) {
NSLog(@"The style definition could not be loaded: %@", error);
}
mapView.mapStyle = style;
self.view = mapView;
}
@end
To define the style options, add a new file to your project named style.json
,
and paste the following JSON style declaration for night-mode styling:
Show/Hide the JSON.
[
{
"featureType": "all",
"elementType": "geometry",
"stylers": [
{
"color": "#242f3e"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"lightness": -80
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#746855"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#263c3f"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#6b9a76"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#2b3544"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9ca5b3"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#38414e"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#212a37"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#746855"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#1f2835"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#f3d19c"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#38414e"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#212a37"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#2f3948"
}
]
},
{
"featureType": "transit.station",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d59563"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#17263c"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#515c6d"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"lightness": -20
}
]
}
]
Use a string resource
The following examples show calling GMSMapStyle(...)
and passing a string
resource:
Swift
import UIKit
import GoogleMaps
let kMapStyle = "[" +
" {" +
" \"featureType\": \"poi.business\"," +
" \"elementType\": \"all\"," +
" \"stylers\": [" +
" {" +
" \"visibility\": \"off\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"transit\"," +
" \"elementType\": \"labels.icon\"," +
" \"stylers\": [" +
" {" +
" \"visibility\": \"off\"" +
" }" +
" ]" +
" }" +
"]"
class ViewController: UIViewController {
// Set the status bar style to complement night-mode.
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}
override func loadView() {
let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
do {
// Set the map style by passing a valid JSON string.
mapView.mapStyle = try GMSMapStyle(jsonString: kMapStyle)
} catch {
NSLog("One or more of the map styles failed to load. \(error)")
}
self.view = mapView
}
}
To define the style options, paste the following style string as the value of
the kMapStyle
variable:
Show/Hide the JSON.
"[" +
" {" +
" \"featureType\": \"all\"," +
" \"elementType\": \"geometry\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#242f3e\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"all\"," +
" \"elementType\": \"labels.text.stroke\"," +
" \"stylers\": [" +
" {" +
" \"lightness\": -80" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"administrative\"," +
" \"elementType\": \"labels.text.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#746855\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"administrative.locality\"," +
" \"elementType\": \"labels.text.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#d59563\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"poi\"," +
" \"elementType\": \"labels.text.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#d59563\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"poi.park\"," +
" \"elementType\": \"geometry\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#263c3f\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"poi.park\"," +
" \"elementType\": \"labels.text.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#6b9a76\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"road\"," +
" \"elementType\": \"geometry.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#2b3544\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"road\"," +
" \"elementType\": \"labels.text.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#9ca5b3\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"road.arterial\"," +
" \"elementType\": \"geometry.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#38414e\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"road.arterial\"," +
" \"elementType\": \"geometry.stroke\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#212a37\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"road.highway\"," +
" \"elementType\": \"geometry.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#746855\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"road.highway\"," +
" \"elementType\": \"geometry.stroke\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#1f2835\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"road.highway\"," +
" \"elementType\": \"labels.text.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#f3d19c\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"road.local\"," +
" \"elementType\": \"geometry.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#38414e\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"road.local\"," +
" \"elementType\": \"geometry.stroke\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#212a37\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"transit\"," +
" \"elementType\": \"geometry\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#2f3948\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"transit.station\"," +
" \"elementType\": \"labels.text.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#d59563\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"water\"," +
" \"elementType\": \"geometry\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#17263c\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"water\"," +
" \"elementType\": \"labels.text.fill\"," +
" \"stylers\": [" +
" {" +
" \"color\": \"#515c6d\"" +
" }" +
" ]" +
" }," +
" {" +
" \"featureType\": \"water\"," +
" \"elementType\": \"labels.text.stroke\"," +
" \"stylers\": [" +
" {" +
" \"lightness\": -20" +
" }" +
" ]" +
" }" +
"]"
Objective C
#import "ViewController.h"
@import GoogleMaps;
// Paste the JSON string to use.
static NSString *const kMapStyle = @"JSON_STYLE_GOES_HERE";
@implementation ViewController
// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
return UIStatusBarStyleLightContent;
}
- (void)loadView {
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
longitude:151.20
zoom:12];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
mapView.myLocationEnabled = YES;
NSError *error;
// Set the map style by passing a valid JSON string.
GMSMapStyle *style = [GMSMapStyle styleWithJSONString:kMapStyle error:&error];
if (!style) {
NSLog(@"The style definition could not be loaded: %@", error);
}
mapView.mapStyle = style;
self.view = mapView;
}
@end
To define the style options, paste the following style string as the value of
the kMapStyle
variable:
Show/Hide the JSON.
@"["
@" {"
@" \"featureType\": \"all\","
@" \"elementType\": \"geometry\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#242f3e\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"all\","
@" \"elementType\": \"labels.text.stroke\","
@" \"stylers\": ["
@" {"
@" \"lightness\": -80"
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"administrative\","
@" \"elementType\": \"labels.text.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#746855\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"administrative.locality\","
@" \"elementType\": \"labels.text.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#d59563\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"poi\","
@" \"elementType\": \"labels.text.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#d59563\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"poi.park\","
@" \"elementType\": \"geometry\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#263c3f\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"poi.park\","
@" \"elementType\": \"labels.text.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#6b9a76\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"road\","
@" \"elementType\": \"geometry.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#2b3544\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"road\","
@" \"elementType\": \"labels.text.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#9ca5b3\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"road.arterial\","
@" \"elementType\": \"geometry.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#38414e\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"road.arterial\","
@" \"elementType\": \"geometry.stroke\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#212a37\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"road.highway\","
@" \"elementType\": \"geometry.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#746855\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"road.highway\","
@" \"elementType\": \"geometry.stroke\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#1f2835\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"road.highway\","
@" \"elementType\": \"labels.text.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#f3d19c\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"road.local\","
@" \"elementType\": \"geometry.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#38414e\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"road.local\","
@" \"elementType\": \"geometry.stroke\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#212a37\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"transit\","
@" \"elementType\": \"geometry\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#2f3948\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"transit.station\","
@" \"elementType\": \"labels.text.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#d59563\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"water\","
@" \"elementType\": \"geometry\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#17263c\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"water\","
@" \"elementType\": \"labels.text.fill\","
@" \"stylers\": ["
@" {"
@" \"color\": \"#515c6d\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"water\","
@" \"elementType\": \"labels.text.stroke\","
@" \"stylers\": ["
@" {"
@" \"lightness\": -20"
@" }"
@" ]"
@" }"
@"]"
JSON style declarations
Styled maps use two concepts to apply colors and other style changes to a
map:
- Selectors specify the geographic components that you can
style on the map. These include roads, parks, bodies of water, and
more, as well as their labels. The selectors include features
and elements, specified as
featureType
and
elementType
properties.
- Stylers are color and visibility properties that you can
apply to map elements. They define the displayed color through a
combination of hue, color, and lightness/gamma values.
See the style reference for a detailed description of the
JSON styling options.
Maps Platform Styling Wizard
Use the Maps Platform Styling Wizard as a quick way
to generate a JSON styling object. The Maps SDK for iOS supports the
same style declarations as the Maps JavaScript API.
Full code samples
The ApiDemos repository on GitHub includes
samples that demonstrate the use of styling.
Next step
See how to hide features on the map with styling.