以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps SDK for iOS をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps SDK for iOS をアクティベートする
  3. 適切なキーを作成する
続ける

クイック マップスタイル設定 - ナイトモード

このページは、マップのスタイル設定を行うためのクイックガイドです。ここでは、例としてナイトモードを使用しています。

概要

スタイル オプションを使用すると、道路、公園、企業や店舗、その他の有名スポットなどの地物の視覚表示を変更して、標準の Google マップの表示スタイルをカスタマイズできます。 これにより、マップの特定のコンポーネントを強調したり、マップをアプリのスタイルに合わせたりすることができます。

スタイル設定は、kGMSTypeNormal マップ タイプでのみ機能します。

スタイルをマップに適用する

カスタム マップスタイルをマップに適用するには、GMSMapStyle(...) を呼び出して、スタイル定義が含まれるローカル JSON ファイルまたは JSON 文字列の URL を渡して、GMSMapStyle インスタンスを作成します。 GMSMapStyle インスタンスを、マップの mapStyle プロパティに割り当てます。

JSON ファイルを使用する

次の例では、GMSMapStyle(...) を呼び出して、ローカル ファイルの URL を渡しています。

Swift

次のコードサンプルでは、プロジェクトに 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

次のコードサンプルでは、プロジェクトに 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

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

文字列リソースを使用する

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

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

スタイル オプションを定義するには、次のスタイル文字列を kMapStyle 変数の値として貼り付けます。

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

スタイル オプションを定義するには、次のスタイル文字列を kMapStyle 変数の値として貼り付けます。

JSON スタイル宣言

スタイル設定されたマップでは、色やその他のスタイル変更をマップに適用するために、次の 2 つのコンセプトを使用します。

  • セレクター で、マップ上でスタイル設定が可能な地理的コンポーネントを指定します。 このようなコンポーネントには、道路、公園、水域など、およびそれらのラベルが含まれます。 セレクターには、featureType および elementType プロパティで指定された地物および要素が含まれます。

  • スタイラーは、マップの要素に適用できる色と可視性のプロパティです。 表示色は、色相、色、および明度 / ガンマ値の組み合わせで定義されます。

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

Google Maps APIs Styling Wizard

Google Maps APIs Styling Wizard を使用して、JSON スタイル設定オブジェクトを簡単に生成できます。 Google Maps SDK for iOS は、Google Maps JavaScript API と同じスタイル宣言をサポートしています。

各種コードサンプル

GitHub の ApiDemos レポジトリには、スタイル設定の使い方を示したサンプルが含まれています。

次のステップ

スタイル設定を使用してマップ上の地物を非表示にする方法をご覧ください。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。