모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps SDK for iOS 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps SDK for iOS 활성화
  3. 적합한 키 생성
계속

빠른 지도 스타일 지정 - 야간 모드

이 페이지는 야간 모드를 예로 들어 지도의 스타일을 지정하는 방법을 설명하는 빠른 가이드입니다.

개요

스타일 옵션으로 표준 Google 지도 스타일의 표현을 사용자 지정하고 도로, 공원, 기업 및 기타 관심 지점 등과 같은 지형지물의 시각적 표시를 변경할 수 있습니다. 즉, 지도의 특정 요소를 강조하거나 지도로 앱의 스타일을 보완할 수 있습니다.

스타일 지정은 kGMSTypeNormal 지도 유형에서만 작동합니다.

지도에 스타일 적용

지도에 사용자 지정 지도 스타일을 적용하려면 GMSMapStyle(...)을 호출하여 GMSMapStyle 인스턴스를 생성하고, 스타일 정의를 포함하는 JSON 문자열 또는 로컬 JSON 파일의 URL을 전달합니다. 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 스타일 선언

스타일 지정 지도는 두 가지 개념을 사용하여 지도에 색상과 기타 스타일 변경사항을 적용합니다.

  • 선택기는 지도에 스타일을 적용할 수 있는 지리적 요소를 지정합니다. 여기에는 도로, 공원, 호수/바다 등과 해당 레이블이 포함됩니다. 선택기는 featureTypeelementType 속성으로 지정된 지형지물요소를 포함합니다.
  • 스타일러는 지도 요소에 적용할 수 있는 색상 및 표시 여부 속성입니다. 이러한 속성은 색조와 색상, 밝기/감마 값을 조합하여 표시되는 색상을 정의합니다.

JSON 스타일 지정 옵션에 관한 자세한 설명은 스타일 참조를 참조하세요.

Google Maps API Styling Wizard

Google Maps API Styling Wizard를 사용하면 신속하게 JSON 스타일 지정 객체를 생성할 수 있습니다. Google Maps SDK for iOS는 Google Maps JavaScript API와 동일한 스타일 선언을 지원합니다.

전체 코드 샘플

Github의 ApiDemos 리포지토리에는 스타일 지정 사용법을 보여주는 샘플이 포함되어 있습니다.

다음 단계

스타일을 적용하여 지도에서 지형지물을 숨기는 방법을 알아봅니다.

다음에 대한 의견 보내기...

Google Maps SDK for iOS
Google Maps SDK for iOS
도움이 필요하시나요? 지원 페이지를 방문하세요.