모든 준비를 마쳤습니다!

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

Google Maps SDK for iOS 활성화

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

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

마커

마커는 지도에서 단일 위치를 나타냅니다.

기본적으로 마커는 일반 Google 지도 스타일을 지닌 표준 아이콘을 사용합니다. 마커를 사용자 지정하려면 기본 마커의 색을 변경하거나 마커 이미지를 사용자 지정 아이콘으로 교체하거나 마커의 다른 속성을 변경합니다.

마커 추가

마커를 추가하려면 positiontitle을 포함하는 GMSMarker 객체를 생성하고 해당 map을 설정합니다.

아래 예시는 기존 GMSMapView 객체에 마커를 추가하는 방법을 보여줍니다. 마커는 10,10 좌표에 생성되고 클릭하면 정보 창에 "Hello world" 문자열을 표시합니다.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;

marker.appearAnimation 속성을 kGMSMarkerAnimationPop으로 설정하여 지도에 새 마커를 추가하는 동작을 애니메이트할 수 있습니다.

마커 제거

GMSMarkermap 속성을 nil로 설정하여 지도에서 마커를 제거할 수 있습니다. 또는 GMSMapView clear 메서드를 호출하여 현재 지도에 있는 모든 오버레이(마커 포함)를 제거할 수 있습니다.

Swift

let camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 6)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
...
mapView.clear()

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
...
[mapView clear];

지도에 마커를 추가한 다음 수정하려면 GMSMarker 객체를 보유하고 있어야 합니다. 나중에 이 객체를 변경하여 마커를 수정할 수 있습니다.

Swift

let marker = GMSMarker(position: position)
marker.map = mapView
...
marker.map = nil

Objective-C

GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
...
marker.map = nil

마커 색상 변경

markerImageWithColor:로 기본 아이콘의 색조가 적용된 버전을 요청하고, 결과 이미지를 GMSMarker 아이콘 속성에 전달하는 방식으로 기본 마커 이미지 색상을 사용자 지정할 수 있습니다.

Swift

marker.icon = GMSMarker.markerImage(with: .black)

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];

마커 이미지 사용자 지정

기본 마커 이미지를 변경하려면 마커의 icon 또는 iconView 속성을 사용하여 사용자 지정 아이콘을 설정할 수 있습니다.

iconView를 설정한 경우 API가 icon 속성을 무시합니다. 현재 icon의 업데이트는 iconView를 설정한 경우에는 인식되지 않습니다.

마커의 icon 속성 사용

다음 스니펫은 icon 속성에서 UIImage로 제공되는 사용자 지정 아이콘이 있는 마커를 만듭니다. 해당 아이콘은 영국 런던에 중심을 두고 있습니다. 이 스니펫에서는 애플리케이션에 "house.png"라는 이름의 이미지가 있다고 가정합니다.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

동일한 이미지로 여러 마커를 생성하는 경우, 각각의 마커에 대해 동일한 UIImage의 인스턴스를 사용합니다. 그러면 여러 마커를 표시할 때 애플리케이션의 성능을 개선하는 데 도움이 됩니다.

이 이미지에 여러 프레임이 있을 수 있습니다. 또한 alignmentRectInsets 속성이 적용되는데, 이는 마커에 그림자나 다른 사용할 수 없는 영역이 있는 경우에 유용합니다.

마커의 iconView 속성 사용

다음 스니펫은 마커의 iconView 속성을 설정하여 사용자 지정 아이콘이 있는 마커를 만들고 마커의 색상 변경을 애니메이트합니다. 이 스니펫에서는 애플리케이션에 "house.png"라는 이름의 이미지가 있다고 가정합니다.

Swift

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func loadView() {

    let camera = GMSCameraPosition.camera(withLatitude: 51.5,
                                          longitude: -0.127,
                                          zoom: 14)
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
      }, completion: {(finished) in
        // Stop tracking view changes to allow CPU to idle.
        self.london?.tracksViewChanges = false
    })
  }

Objective-C

#import "ViewController.h"
@import GoogleMaps;

@interface ViewController () <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation ViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView
    idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
                     _londonView.tintColor = [UIColor blueColor];
                   }
                   completion:^(BOOL finished) {
                     // Stop tracking view changes to allow CPU to idle.
                     _london.tracksViewChanges = NO;
                   }];
}

@end

iconViewUIView를 허용하므로 마커를 정의하는 표준 UI 컨트롤의 계층 구조를 가질 수 있으며, 각 뷰에는 표준 애니메이션 기능 집합이 있습니다. 마커 크기, 색상 및 알파 수준에 대한 변경 사항을 포함할 수 있으며 임의의 변환을 적용할 수 있습니다. iconView 속성은 framecenter를 제외한 모든 애니메이션 가능한 UIView 속성의 애니메이션을 지원합니다.

iconView를 사용할 때 다음 사항을 고려하세요.

  • tracksViewChangesYES로 설정된 경우 UIView가 리소스를 요구할 수 있으므로 배터리 사용량이 늘어날 수 있습니다. 이에 비해 단일 프레임 UIImage는 정적이며 다시 렌더링할 필요가 없습니다.
  • 화면에 마커가 많고, 각 마커마다 고유한 UIView가 있고 모든 마커가 동시에 변경 사항을 추적하는 경우, 일부 기기가 지도를 렌더링하는 데 어려움을 겪을 수 있습니다.
  • iconView는 단순히 뷰의 스냅샷이기 때문에 사용자 상호작용에 응답하지 않습니다.
  • 뷰는 실제 값에 관계없이 clipsToBoundsYES로 설정된 것처럼 작동합니다. 경계 바깥에서 작동하는 변환을 적용 할 수 있지만 그리는 객체는 객체의 경계 내에 있어야 합니다. 모든 변환/이동이 모니터링되고 적용됩니다. 즉, 하위 뷰는 뷰 내에 포함되어야 합니다.

tracksViewChanges 속성을 설정할 시기를 결정하려면 마커를 자동으로 다시 그리는 장점과 그에 따른 성능 저하를 고려해야 합니다. 예:

  • 수행할 일련의 변경 사항이 있는 경우 해당 속성을 YES로 변경한 다음 다시 NO로 변경할 수 있습니다.
  • 애니메이션이 실행 중이거나 콘텐츠가 비동기적으로 로드 중인 경우, 작업이 완료될 때까지 해당 속성을 YES로 설정해야 합니다.

마커 불투명도 변경

opacity 속성으로 마커의 불투명도를 제어할 수 있습니다. 불투명도는 0.0~1.0 사이의 부동 소수점으로 지정해야 하는데, 여기서 0은 완전 투명을, 1은 완전 불투명을 나타냅니다.

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

GMSMarkerLayer를 통해 Core Animation을 사용하여 마커 불투명도를 애니메이트할 수 있습니다.

마커 평면화

마커 아이콘은 일반적으로 지도의 표면이 아니라 기기의 화면을 기준으로 방향이 그려지므로 지도를 회전, 틸트, 확대/축소하더라도 마커의 방향은 변경되지 않습니다.

마커의 방향을 지구에 대해 평평하게 설정할 수 있습니다. 평면 마커는 지도가 회전할 때 회전하고 지도가 틸트될 때 시점을 바꿉니다. 일반 마커와 마찬가지로 평면 마커는 지도가 확대/축소될 때 크기를 유지합니다.

마커의 방향을 바꾸려면 마커의 flat 속성을 YES 또는 true로 설정합니다.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.isFlat = true
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.flat = YES;
london.map = mapView;

마커 회전

rotation 속성을 설정하여 앵커 지점을 중심으로 마커를 회전할 수 있습니다. 회전은 CLLocationDegrees 유형으로 지정되고 기본 위치에서 시계 방향으로 도 단위로 측정합니다. 마커가 지도에서 평면인 경우 기본 위치는 북쪽입니다.

다음 예시는 마커를 90° 회전합니다. groundAnchor 속성을 0.5,0.5로 설정하면 마커가 베이스가 아니라 중앙을 기준으로 회전합니다.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let degrees = 90.0
let london = GMSMarker(position: position)
london.groundAnchor = CGPoint(x: 0.5, y: 0.5)
london.rotation = degrees
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
CLLocationDegrees degrees = 90;
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.groundAnchor = CGPointMake(0.5, 0.5);
london.rotation = degrees;
london.map = mapView;

정보 창 추가

정보 창을 사용하면 사용자가 마커를 눌렀을 때 정보를 표시할 수 있습니다. 정보 창은 한 번에 하나만 표시됩니다. 사용자가 다른 마커를 누르면, 현재 창이 숨겨지고 새 정보 창이 표시됩니다. 정보 창의 콘텐츠는 titlesnippet 속성으로 정의됩니다. titlesnippet 속성이 비어 있거나 nil인 경우, 마커를 클릭하더라도 정보 창이 표시되지 않습니다.

아래 스니펫은 정보 창의 텍스트에 대한 제목만 있는 간단한 마커를 생성합니다.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;

snippet 속성을 사용하여 제목 아래에 작은 글꼴로 나타나는 텍스트를 추가할 수 있습니다. 정보 창 너비보다 긴 문자열은 여러 줄에 걸쳐 자동으로 줄바꿈됩니다. 매우 긴 메시지는 잘릴 수 있습니다.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;

정보 창을 자동으로 새로 고치도록 설정

정보 창을 숨겼다가 다시 표시할 때까지 기다리지 않고 새 속성이나 정보 창 콘텐츠를 변경 시 즉시 표시하려면 마커의 tracksInfoWindowChangesYES 또는 true로 설정합니다. 기본값은 NO 또는 false입니다.

Swift

marker.tracksInfoWindowChanges = true

Objective-C

marker.tracksInfoWindowChanges = YES;

tracksInfoWindowChanges 속성을 설정할 시기를 결정하려면 정보 창을 자동으로 다시 그리는 장점과 그에 따른 성능 저하를 고려해야 합니다. 예:

  • 수행할 일련의 변경 사항이 있는 경우 해당 속성을 YES로 변경한 다음 다시 NO로 변경할 수 있습니다.
  • 애니메이션이 실행 중이거나 콘텐츠가 비동기적으로 로드 중인 경우, 작업이 완료될 때까지 해당 속성을 YES로 설정해야 합니다.

마커의 iconView 속성을 사용할 때 고려 사항도 참조하세요.

정보 창의 위치 변경

정보 창은 연관된 마커 위를 중심으로 기기의 화면과 반대쪽 방향으로 나타납니다. infoWindowAnchor 속성을 설정하여 마커에 대해 상대적으로 정보 창의 위치를 변경할 수 있습니다. 이 속성은 (x,y) 오프셋으로 정의된 CGPoint를 받습니다. 여기서 x와 y의 범위는 모두 0.0~1.0 사이입니다. 기본 오프셋은 (0.5, 0.0), 즉 위쪽 중앙입니다. infoWindowAnchor 오프셋을 설정하면 사용자 지정 아이콘에 대해 정보 창을 정렬할 때 유용합니다.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

마커 및 정보 창의 이벤트 처리

사용자가 마커나 정보 창을 누르는 등과 같이 지도에서 발생하는 이벤트를 수신할 수 있습니다. 이벤트를 수신하려면 GMSMapViewDelegate 프로토콜로 구현합니다. GMSMapViewDelegate에 대해서는 이벤트 가이드와 메서드 목록을 참조하세요. 스트리트 뷰 이벤트의 경우 GMSPanoramaViewDelegate를 참조하세요.

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

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