スタイル付き地図を追加する

プラットフォームを選択: Android iOS JavaScript

このページでは、夜間モードを例に、地図のスタイルを設定する方法について説明します。

概要

スタイル オプションを使用すると、標準の Google Cloud アセットのプレゼンテーションをカスタマイズでき、 地図のスタイルの設定、対象物の視覚的な表示の変更（道路、公園、 店舗などさまざまな場所の 場所を表示できます地図の特定のコンポーネントを際立たせたり、アプリのスタイルに地図を合わせたりできます。

スタイル設定は、kGMSTypeNormal 地図タイプでのみ使用できます。

地図にスタイルを適用する

地図にカスタムの地図スタイルを適用するには、GMSMapStyle(...) を呼び出して GMSMapStyle インスタンス（ローカルの JSON ファイルの URL または JSON を スタイルの定義を含む文字列です。GMSMapStyle インスタンスを 地図の mapStyle プロパティ。

JSON ファイルを使用する

次の例では、GMSMapStyle(...) を呼び出し、 ローカル ファイル:

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

スタイル オプションを定義するには、style.json という名前の新しいファイルをプロジェクトに追加します。 夜間モード スタイル設定の次の JSON スタイル宣言を貼り付けます。

文字列リソースの使用

次の例は、GMSMapStyle(...) を呼び出して文字列リソースを渡しています。

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

スタイル オプションを定義するには、次のスタイル文字列を kMapStyle 変数:

JSON スタイル宣言

スタイル付き地図では、色などのスタイルの変更をマップに適用するために、次の 2 つのコンセプトを使用します。

  • セレクタでは、地図上でスタイル設定が可能な地理的コンポーネントを指定します。これには、道路、公園、水域など、およびそれらのラベルが含まれます。セレクタには「対象物」と「要素」があり、それぞれ featureType プロパティと elementType プロパティとして指定します。
  • スタイラーは、地図の要素に適用可能な色と公開設定のプロパティです。表示される色は色相、彩度、明度またはガンマ値の組み合わせで定義します。

JSON スタイルのオプションについて詳しくは、スタイル リファレンスをご覧ください。

Maps Platform Styling Wizard

Google Maps Platform API のカスタム スタイルを作成する

Maps Platform スタイル ウィザードを使用すると簡単に JSON スタイル オブジェクトを生成します。Maps SDK for iOS は Maps JavaScript API と同じスタイル宣言。

各種コードサンプル

GitHub の ApiDemos リポジトリには、スタイルの使用方法を示すサンプルがあります。

次のステップ

スタイル設定を使って地図上の対象物をスタイルで非表示にする方法をご覧ください。