RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.google.com/maps/documentation/ios-sdk/styling below:

Add a Styled Map | Maps SDK for iOS

Stay organized with collections Save and categorize content based on your preferences.

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

If you want to update the same style across multiple apps, look into cloud customization, which is available in the Google Cloud console and requires a map ID. To avoid potential conflicts, do not combine cloud customization and hardcoded styling in the same app. 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

import GoogleMaps

class MapStyling: 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

#import "MapStyling.h"
@import GoogleMaps;

@interface MapStyling ()

@end

@implementation MapStyling

// 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

class MapStylingStringResource: UIViewController {

  let MapStyle = "JSON_STYLE_GOES_HERE"

  // 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: MapStyle)
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

Objective-C

@implementation MapStylingStringResource

// Paste the JSON string to use.
static NSString *const kMapStyle = @"JSON_STYLE_GOES_HERE";

// 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 and 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.

Note: To have a style apply to multiple app platforms, consider using cloud-based maps styling. If you want to use a JSON style, you can import it. For details, see Import a JSON map style. 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.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-07-23 UTC.

[[["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-07-23 UTC."],[[["This guide provides instructions for styling Google Maps using JSON to customize the appearance of map elements."],["You can style your map using a local JSON file or a JSON string, applying it to the `mapStyle` property of the map."],["JSON style declarations consist of selectors (`featureType`, `elementType`) to target map components and stylers to define their visual properties."],["Leverage the Maps Platform Styling Wizard to easily create custom JSON styles and apply them to your maps."],["Styling is applicable only to the `kGMSTypeNormal` map type and offers flexibility in highlighting or blending map features with your application's design."]]],["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"]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4