지도 스타일 지정

플랫폼 선택: Android iOS JavaScript

이 가이드에서는 이동을 추적할 때 iOS 앱에 표시되는 지도의 스타일을 지정하는 방법을 설명합니다.

시작하기 전에

지도의 스타일을 지정하려면 먼저 다음 내용을 구현한 소비자 앱이 있어야 합니다.

• 지도뷰입니다. 지도뷰 초기화를 참고하세요.

• 지도뷰 이벤트를 처리하는 방법 지도뷰 이벤트 처리를 참고하세요.

또한 소비자 SDK에 필요한 백엔드 서비스를 설정하고 소비자 SDK를 설정해야 합니다. 자세한 내용은 Consumer SDK 설정 및 Fleet Engine이란 무엇인가요?를 참고하세요.

지도 맞춤설정

다음과 같은 맞춤설정이 가능합니다.

• 지도 스타일 지정: 클라우드 기반 지도 스타일 지정을 사용하여 지도 색상, 다중선, 기타 지도 지형지물의 스타일을 지정할 수 있습니다. 지도 스타일 지정을 참고하세요.

• 카메라 확대/축소 조정: 기본 제공 기능을 사용하거나 자체 카메라 옵션을 설정하여 여정에 집중할 수 있습니다. 여행에 초점을 맞추도록 카메라 줌 조정을 참고하세요.

• 마커 및 폴라라인 맞춤설정: 앱 디자인에 맞춤 마커와 경로 폴라라인을 추가할 수 있습니다. 이러한 디자인 요소를 사용하면 소비자 앱에서 차량 경로의 동적 미리보기를 표시할 수 있습니다. 마커 맞춤설정 및 다중선 맞춤설정을 참고하세요.

  SDK는 consumerMapStyleCoordinator 속성을 통해 이러한 옵션을 제공합니다. 이 속성은 GMTCMapView 클래스를 통해 사용할 수 있습니다.

클라우드 기반 지도 스타일 지정으로 지도 스타일 지정하기

클라우드 기반 지도 스타일 지정을 사용하여 지도 구성요소의 디자인과 분위기를 맞춤설정할 수 있습니다. 코드를 변경할 필요 없이 Google 지도를 사용하는 모든 앱의 지도 스타일을 Google Cloud 콘솔에서 만들고 수정할 수 있습니다. 자세한 내용은 클라우드 기반 지도 스타일 지정을 참고하세요.

ConsumerMapView 클래스와 ConsumerMapFragment 클래스 모두 클라우드 기반 지도 스타일 지정을 지원합니다. 클라우드 기반 지도 스타일 지정을 사용하려면 선택한 지도 렌더기가 LATEST여야 합니다. 다음 섹션에서는 프로젝트에서 클라우드 기반 지도 스타일을 사용하는 방법의 예를 보여줍니다.

ConsumerMapView

ConsumerMapView에서 클라우드 기반 지도 스타일 지정을 사용하려면 GoogleMapOptions의 mapId 필드를 설정하고 GoogleMapOptions를 getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) 또는 getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)에 전달합니다.

예

자바

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

ConsumerMapFragments에서 클라우드 기반 지도 스타일 지정을 사용하는 방법에는 두 가지가 있습니다.

• XML을 사용하여 정적으로
• newInstance를 사용하여 동적으로

XML을 사용하여 정적으로

ConsumerMapFragment의 XML과 함께 클라우드 기반 지도 스타일을 사용하려면 지정된 mapId와 함께 map:mapId XML 속성을 추가합니다. 아래 예를 참고하세요.

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

newInstance를 사용하여 동적으로

ConsumerMapFragment에서 newInstance와 함께 클라우드 기반 지도 스타일 지정을 사용하려면 GoogleMapOptions에서 mapId 필드를 설정하고 GoogleMapOptions를 newInstance에 전달합니다. 아래 예를 참고하세요.

자바

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}

여행에 초점을 맞추도록 카메라 확대/축소를 조정하세요.

경로 공유 세션이 진행 중일 때는 사용자가 경로에 있는 차량을 확대해서 보는 것보다는 이동 중에 차량을 더 크게 보는 것이 도움이 됩니다. 이렇게 하려면 내장된 AutoCamera를 사용하거나 다음과 같이 카메라 동작을 직접 맞춤설정하여 카메라 확대/축소 수준을 조정하세요.

• AutoCamera: AutoCamera를 사용하려면 아무것도 할 필요가 없습니다. 기본적으로 카메라는 경로를 따라갑니다.

• 카메라 동작 맞춤설정: 카메라 동작을 맞춤설정하려면 AutoCamera를 사용 중지한 다음 맞춤설정해야 합니다.

AutoCamera는 기본적으로 카메라를 중앙에 놓습니다.

소비자 SDK는 Maps SDK에 내장된 내 위치 버튼에 기본적으로 사용 설정되는 AutoCamera 기능을 제공합니다. 카메라가 경로와 다음 경로 중간 지점에 초점을 맞추도록 확대합니다.

AutoCamera을(를) 사용하려면 사용 설정되어 있는지 확인하세요. 자세한 내용은 allowCameraAutoUpdate를 참조하세요.

Maps SDK의 내 위치 버튼에 관한 자세한 내용은 iOS용 Maps SDK 문서의 내 위치 버튼을 참고하세요.

카메라 동작 맞춤설정

카메라 동작을 더 세부적으로 제어하려면 AutoCamera를 사용 중지하고 카메라 동작을 맞춤설정하면 됩니다.

AllowCameraAutoUpdate 속성으로 AutoCamera를 사용 중지하거나 사용 설정합니다.

카메라 맞춤설정에 대한 자세한 내용은 iOS용 Maps SDK 문서의 카메라 이동을 참고하세요.

다음 단계

iOS에서 여행 팔로우하기