New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, see New map style for Google Maps Platform.
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 the kGMSTypeNormal map type.
Applying 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.
Using a JSON file
The following examples show calling GMSMapStyle(...) 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("Unabletofindstyle.json")}}catch{NSLog("Oneormoreofthemapstylesfailedtoload.\(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(@"Thestyledefinitioncouldnotbeloaded:%@",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:
The following examples show calling GMSMapStyle(...) 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("Oneormoreofthemapstylesfailedtoload.\(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(@"Thestyledefinitioncouldnotbeloaded:%@",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:
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.
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.
[[["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 2024-09-19 UTC."],[],[]]