마커는 지도에서 단일 위치를 나타냅니다.
기본적으로 마커는 일반적인 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
의 모든 애니메이션 가능 속성의 애니메이션을 지원합니다.
tracksViewChanges
가YES
로 설정되면UIView
에서 리소스를 요구할 수 있으므로 배터리 사용량이 증가할 수 있습니다. 이에 비해 단일 프레임UIImage
는 정적이며 다시 렌더링할 필요가 없습니다.- 화면에 마커가 많고, 각 마커가 자체
UIView
를 가지며, 모든 마커가 동시에 변경사항을 추적하는 경우 일부 기기에서 지도를 렌더링하는 데 어려움이 있을 수 있습니다. iconView
는 뷰의 스냅샷이므로 사용자 상호작용에 응답하지 않습니다.- 뷰는 실제 값과 관계없이
clipsToBounds
가YES
로 설정된 것처럼 동작합니다. 경계 밖에서 작동하는 변환을 적용할 수 있지만 그리는 객체는 객체의 경계 내에 있어야 합니다. 모든 변환/이동이 모니터링되고 적용됩니다. 즉, 하위 뷰는 뷰 내에 포함되어야 합니다.
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]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
를 참고하세요.