정보 창

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
플랫폼 선택: Android iOS 자바스크립트

마커 위에 나타나는 정보 창

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

정보 창은 기기 화면을 향하도록 펼쳐지며 연결된 마커 위에 중심을 맞춰 표시됩니다. 기본 정보 창에는 제목이 굵게 표시되며 제목 아래 스니펫 텍스트가 포함됩니다.

정보 창의 콘텐츠는 마커의 titlesnippet 속성으로 정의됩니다. title 속성과 snippet 속성이 모두 비어 있거나 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

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

Objective-C

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

정보 창 표시/숨기기

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

  • selectedMarker를 표시하려면 마커의 이름으로 설정하세요.
  • 숨기려면 selectedMarkernil로 설정합니다.

Swift

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

Objective-C

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

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

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

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

언제 tracksInfoWindowChanges 속성을 설정할지 결정하려면 성능 창을 고려하여 정보 창을 자동으로 다시 그리는 것의 장점과 비교해야 합니다. 예를 들면 다음과 같습니다.

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

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

정보 창의 위치 변경

정보 창은 기기 화면을 향하도록 펼쳐지며 연결된 마커 위에 중심을 맞춰 표시됩니다. infoWindowAnchor 속성을 설정하여 마커를 기준으로 정보 창의 위치를 변경할 수 있습니다. 이 속성은 (x,y) 오프셋으로 정의된 CGPoint를 허용합니다. 여기서 x 및 y는 모두 0.0에서 1.0 사이입니다. 기본 오프셋은 (0.5, 0.0), 즉 가운데 상단입니다. infoWindowAnchor 오프셋을 설정하면 정보 창을 맞춤 아이콘과 정렬하는 데 유용합니다.

Swift

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

Objective-C

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

정보 창의 이벤트 처리

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

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

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

맞춤 정보 창

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

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

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

정보 창 비교

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

이 샘플 다운로드 및 실행에 대한 자세한 내용은 코드 샘플을 참조하세요.