정보 창

정보 창을 사용하면 사용자가 마커를 탭할 때 사용자에게 정보를 표시할 수 있습니다.

정보 창은 기기의 화면을 기준으로 연결된 마커 위에 가운데에 배치되어 그려집니다. 기본 정보 창에는 제목이 굵게 표시되고 제목 아래에 스니펫 텍스트가 표시됩니다.

정보 창의 콘텐츠는 마커의 title 및 snippet 속성으로 정의됩니다. title 및 snippet 속성이 모두 비어 있거나 nil인 경우 마커를 클릭해도 정보 창이 표시되지 않습니다.

정보 창은 한 번에 하나만 표시됩니다. 사용자가 다른 마커를 탭하면 현재 창이 숨겨지고 새 정보 창이 열립니다. 사용자가 현재 정보 창을 표시하는 마커를 클릭하면 해당 정보 창이 닫혔다가 다시 열립니다.

맞춤 정보 창을 만들어 텍스트나 이미지를 추가합니다. 맞춤 정보 창을 사용하면 팝업의 모양을 완전히 제어할 수 있습니다.

정보 창 추가

다음 스니펫은 정보 창 텍스트의 제목만 있는 간단한 마커를 만듭니다.

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

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

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

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
      

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
      

정보 창 표시/숨기기

정보 창은 마커에서 사용자 터치 이벤트에 응답하도록 설계되었습니다. GMSMapView의 selectedMarker 속성을 설정하여 프로그래매틱 방식으로 정보 창을 표시하거나 숨길 수 있습니다.

• selectedMarker을 마커 이름으로 설정하여 마커를 표시합니다.
• selectedMarker를 nil로 설정하여 숨깁니다.

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil
      

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
// Show marker
mapView.selectedMarker = london;
// Hide marker
mapView.selectedMarker = nil;
      

정보 창이 자동으로 새로고침되도록 설정

정보 창이 숨겨졌다가 다시 표시될 때까지 기다리지 않고 새 속성 또는 정보 창의 콘텐츠가 변경될 때 즉시 표시되도록 하려면 마커의 tracksInfoWindowChanges를 YES 또는 true로 설정하세요. 기본값은 NO 또는 false입니다.

london.tracksInfoWindowChanges = true
      

london.tracksInfoWindowChanges = YES;
      

tracksInfoWindowChanges 속성을 설정할 시기를 결정하려면 정보 창이 자동으로 다시 그려지는 이점과 성능 고려사항을 비교해야 합니다. 예를 들면 다음과 같습니다.

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

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

정보 창 위치 변경

정보 창은 기기 화면을 기준으로 펼쳐지며 해당하는 마커 위에 중심을 맞춰 표시됩니다. infoWindowAnchor 속성을 설정하여 마커를 기준으로 정보 창의 위치를 변경할 수 있습니다. 이 속성은 CGPoint를 허용하며, CGPoint는 (x,y) 오프셋으로 정의되며 x와 y의 범위는 모두 0.0~1.0입니다. 기본 오프셋은 (0.5, 0.0) 즉 중앙 상단입니다. infoWindowAnchor 오프셋을 설정하면 정보 창을 맞춤 아이콘에 맞춰 정렬하는 데 유용합니다.

london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView
      

london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

정보 창에서 이벤트 처리

다음 정보 창 이벤트를 수신할 수 있습니다.

• mapView:markerInfoWindow:: 마커가 선택되려고 할 때 호출됩니다. 선택적으로 마커에 사용할 맞춤 정보 창을 UIView로 반환할 수 있습니다. 자세한 내용은 아래의 맞춤 정보 창을 참고하세요.

• mapView:markerInfoContents: — mapView:markerInfoWindow이 nil을 반환할 때 호출됩니다.

• mapView:didCloseInfoWindowOfMarker:: 마커의 정보 창이 닫힐 때 호출됩니다.

• mapView:didLongPressInfoWindowOfMarker: — 마커의 정보 창을 길게 누른 후에 호출됩니다.

이벤트를 수신 대기하려면 GMSMapViewDelegate 프로토콜을 구현해야 합니다. 이벤트 가이드와 GMSMapViewDelegate의 메서드 목록을 참고하세요.

GitHub에는 정보 창 이벤트를 처리하는 방법을 보여주는 샘플이 포함되어 있습니다.

• Objective-C
• Swift

맞춤 정보 창

맞춤 정보 창의 레이아웃을 정의하는 UIView의 서브클래스를 만들어 정보 창의 콘텐츠를 맞춤설정합니다. 이 서브클래스에서 원하는 대로 뷰를 정의합니다. 예를 들어 맞춤 UILabel 인스턴스를 사용하여 제목 및 스니펫 텍스트와 UIImageView 인스턴스와 같은 다른 뷰를 표시하여 정보 창에 표시되는 이미지를 추가할 수 있습니다.

ViewController가 GMSIndoorDisplayDelegate 프로토콜을 구현하고 mapView:markerInfoWindow: 이벤트의 리스너를 정의하는지 확인합니다. 이 이벤트 리스너는 마커가 선택되려 할 때 호출되며 맞춤 UIView 클래스의 인스턴스를 반환하여 마커에서 사용하는 맞춤 정보 창을 정의할 수 있습니다.

아래 이미지는 기본 정보 창, 맞춤 콘텐츠가 포함된 정보 창, 맞춤 프레임과 배경이 포함된 정보 창을 보여 줍니다.

iOS용 Maps SDK와 함께 제공되는 GitHub의 코드 샘플에는 맞춤 정보 창 샘플이 포함되어 있습니다. 예를 들어 MarkerInfoWindowViewController.m (Objective-C) 또는 MarkerInfoWindowViewController.swift(Swift)의 정의를 참고하세요.

이러한 샘플을 다운로드하고 실행하는 방법은 코드 샘플을 참고하세요.