This page is a quick guide to styling 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 thekGMSTypeNormalmap type.
Apply styles to your map
To apply custom map styles to a map, callGMSMapStyle(...)to create aGMSMapStyleinstance, passing in a URL for a local JSON file, or a JSON
string containing style definitions. Assign theGMSMapStyleinstance to themapStyleproperty of the map.
Use a JSON file
The following examples show callingGMSMapStyle(...)and passing a URL for a
local file:
Swift
importGoogleMapsclassMapStyling:UIViewController{// Set the status bar style to complement night-mode.overridevarpreferredStatusBarStyle:UIStatusBarStyle{return.lightContent}overridefuncloadView(){letcamera=GMSCameraPosition.camera(withLatitude:-33.86,longitude:151.20,zoom:14.0)letmapView=GMSMapView.map(withFrame:CGRect.zero,camera:camera)do{// Set the map style by passing the URL of the local file.ifletstyleURL=Bundle.main.url(forResource:"style",withExtension:"json"){mapView.mapStyle=tryGMSMapStyle(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
#import "MapStyling.h"@importGoogleMaps;@interfaceMapStyling()@end@implementationMapStyling// Set the status bar style to complement night-mode.-(UIStatusBarStyle)preferredStatusBarStyle{returnUIStatusBarStyleLightContent;}-(void)loadView{GMSCameraPosition*camera=[GMSCameraPositioncameraWithLatitude:-33.86longitude:151.20zoom:12];GMSMapView*mapView=[GMSMapViewmapWithFrame:CGRectZerocamera:camera];mapView.myLocationEnabled=YES;NSBundle*mainBundle=[NSBundlemainBundle];NSURL*styleUrl=[mainBundleURLForResource:@"style"withExtension:@"json"];NSError*error;// Set the map style by passing the URL for style.json.GMSMapStyle*style=[GMSMapStylestyleWithContentsOfFileURL:styleUrlerror:&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 namedstyle.json,
and paste the following JSON style declaration for night-mode styling:
The following examples show callingGMSMapStyle(...)and passing a string
resource:
Swift
classMapStylingStringResource:UIViewController{letMapStyle="JSON_STYLE_GOES_HERE"// Set the status bar style to complement night-mode.overridevarpreferredStatusBarStyle:UIStatusBarStyle{return.lightContent}overridefuncloadView(){letcamera=GMSCameraPosition.camera(withLatitude:-33.86,longitude:151.20,zoom:14.0)letmapView=GMSMapView.map(withFrame:CGRect.zero,camera:camera)do{// Set the map style by passing a valid JSON string.mapView.mapStyle=tryGMSMapStyle(jsonString:MapStyle)}catch{NSLog("One or more of the map styles failed to load.\(error)")}self.view=mapView}}
Objective-C
@implementationMapStylingStringResource// Paste the JSON string to use.staticNSString*constkMapStyle=@"JSON_STYLE_GOES_HERE";// Set the status bar style to complement night-mode.-(UIStatusBarStyle)preferredStatusBarStyle{returnUIStatusBarStyleLightContent;}-(void)loadView{GMSCameraPosition*camera=[GMSCameraPositioncameraWithLatitude:-33.86longitude:151.20zoom:12];GMSMapView*mapView=[GMSMapViewmapWithFrame:CGRectZerocamera:camera];mapView.myLocationEnabled=YES;NSError*error;// Set the map style by passing a valid JSON string.GMSMapStyle*style=[GMSMapStylestyleWithJSONString:kMapStyleerror:&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
thekMapStylevariable:
Styled maps use two concepts to apply colors and other style changes to a
map:
Selectorsspecify 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 includefeaturesandelements, specified asfeatureTypeandelementTypeproperties.
Stylersare color and visibility properties that you can
apply to map elements. They define the displayed color through a
combination of hue, color, and lightness and gamma values.
See thestyle referencefor a detailed description of the
JSON styling options.
Use theMaps Platform Styling Wizardas 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
TheApiDemos repositoryon GitHub includes samples that demonstrate the use of styling.
[[["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-09-04 UTC."],[[["\u003cp\u003eThis guide provides instructions for styling Google Maps using JSON to customize the appearance of map elements.\u003c/p\u003e\n"],["\u003cp\u003eYou can style your map using a local JSON file or a JSON string, applying it to the \u003ccode\u003emapStyle\u003c/code\u003e property of the map.\u003c/p\u003e\n"],["\u003cp\u003eJSON style declarations consist of selectors (\u003ccode\u003efeatureType\u003c/code\u003e, \u003ccode\u003eelementType\u003c/code\u003e) to target map components and stylers to define their visual properties.\u003c/p\u003e\n"],["\u003cp\u003eLeverage the Maps Platform Styling Wizard to easily create custom JSON styles and apply them to your maps.\u003c/p\u003e\n"],["\u003cp\u003eStyling is applicable only to the \u003ccode\u003ekGMSTypeNormal\u003c/code\u003e map type and offers flexibility in highlighting or blending map features with your application's design.\u003c/p\u003e\n"]]],["To customize map appearance, apply styles to the `kGMSTypeNormal` map type. Utilize `GMSMapStyle` by passing a URL for a local JSON file or a JSON string to the `mapStyle` property. Define styles with selectors (features and elements) and stylers (color, visibility). Create a `style.json` file for night-mode styling with the provided JSON or use a JSON string directly. Consider cloud customization for uniform styling across multiple apps. The Maps Platform Styling Wizard can help generate JSON style objects. Avoid mixing cloud and hardcoded styles.\n"],null,[]]
