As well as changing the style of features on the map, you can also hide them entirely. This example shows you how to hide business points of interest (POIs) and public transit icons on your map.
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 to hide business points of
interest (POIs) and public transit icons:
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
}
}
The following style declaration hides business points of interest (POIs) and
public transit icons. Paste the following style string as the value of
the kMapStyle variable:
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
The following style declaration hides business points of interest (POIs) and
public transit icons. Paste the following style string as the value of
the kMapStyle variable:
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
featureTypeandelementTypeproperties. - 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.
Need help? Visit our