마커

플랫폼 선택: Android iOS JavaScript

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

기본적으로 마커는 일반적인 Google 지도 디자인을 갖는 표준 아이콘을 사용합니다. 마커를 맞춤설정하려면 기본 마커의 색상을 변경하거나, 마커 이미지를 맞춤 아이콘으로 바꾸거나, 마커의 다른 속성을 변경하면 됩니다.

마커의 클릭 이벤트에 대한 응답으로 정보 창을 열 수 있습니다. 정보 창은 마커 위의 대화상자 창에 텍스트 또는 이미지를 표시합니다. 기본 정보 창을 사용하여 텍스트를 표시하거나 자체 맞춤 정보 창을 만들어 콘텐츠를 완전히 제어할 수 있습니다.

마커 추가

마커를 추가하려면 position 및 title를 포함하는 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를 사용하여 마커가 추가될 때 groundAnchor에서 팝되도록 합니다.
• kGMSMarkerAnimationFadeIn를 사용하여 마커가 추가될 때 페이드인되도록 합니다.

마커 제거

GMSMarker의 map 속성을 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 position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
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 속성 사용

다음 스니펫에서는 icon 속성에 UIImage로 제공된 맞춤 아이콘으로 마커를 만듭니다. 해당 아이콘은 영국 런던에 중심을 두고 있습니다. 이 스니펫에서는 애플리케이션에 'house.png'라는 이미지가 포함되어 있다고 가정합니다.

Swift

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

Objective-C

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

동일한 이미지로 여러 마커를 만드는 경우 각 마커에 동일한 UIImage 인스턴스를 사용합니다. 이렇게 하면 마커를 많이 표시할 때 애플리케이션의 성능이 개선됩니다.

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

마커의 iconView 속성 사용

다음 스니펫은 마커의 iconView 속성을 설정하여 맞춤 아이콘으로 마커를 만들고 마커의 색상 변경을 애니메이션으로 표시합니다. 이 스니펫은 사용자의 애플리케이션에 'house.png'라는 이미지가 포함되어 있다고 가정합니다.

Swift

import CoreLocation
import GoogleMaps

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

  override func viewDidLoad() {
    super.viewDidLoad()

    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 CoreLocation;
@import GoogleMaps;

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

@implementation MarkerViewController {
  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:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

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

iconView를 사용할 때는 다음 고려사항에 유의하세요.

• tracksViewChanges이 YES로 설정된 경우 UIView은 리소스를 많이 사용할 수 있으며, 이로 인해 배터리 사용량이 증가할 수 있습니다. 반면 단일 프레임 UIImage는 정적이며 다시 렌더링할 필요가 없습니다.
• 화면에 마커가 많고 각 마커에 자체 UIView가 있으며 모든 마커가 동시에 변경사항을 추적하는 경우 일부 기기에서 지도를 렌더링하는 데 어려움을 겪을 수 있습니다.
• iconView는 뷰의 스냅샷이므로 사용자 상호작용에 응답하지 않습니다.
• 뷰는 실제 값과 관계없이 clipsToBounds이 YES로 설정된 것처럼 동작합니다. 경계 외부에서 작동하는 변환을 적용할 수 있지만, 그리는 객체는 객체의 경계 내에 있어야 합니다. 모든 변환/이동이 모니터링되고 적용됩니다. 간단히 말해 하위 뷰는 뷰 내에 포함되어야 합니다.
• GMSMarker에서 -copyWithZone:를 사용하려면 먼저 GMSMarker를 복사한 다음 복사본에 iconView의 새 인스턴스를 설정해야 합니다. UIView에서는 NSCopying을 지원하지 않으므로 iconView을 복사할 수 없습니다.

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 positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

Objective-C

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

마커 회전

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

다음 예에서는 마커가 90° 회전합니다. groundAnchor 속성을 0.5,0.5로 설정하면 마커가 하단이 아니라 가운데를 중심으로 회전합니다.

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

Objective-C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

마커의 이벤트 처리

사용자가 마커를 탭하는 경우와 같이 지도에서 발생하는 이벤트를 수신할 수 있습니다. 이벤트를 수신하려면 GMSMapViewDelegate 프로토콜을 구현해야 합니다. 특정 마커 이벤트를 처리하는 방법을 알아보려면 마커 이벤트 및 동작을 참고하세요. 이벤트 가이드에서는 GMSMapViewDelegate의 메서드 목록도 제공합니다. 스트리트 뷰 이벤트의 경우 GMSPanoramaViewDelegate를 참고하세요.