지도 스타일 지정

플랫폼 선택: Android iOS JavaScript

이 가이드에서는 이동을 추적할 때 Android 앱에 표시되는 지도를 맞춤설정하는 방법을 설명합니다. 다음과 같은 방법으로 지도의 디자인과 동작을 맞춤설정할 수 있습니다.

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

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

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

ConsumerMapView

ConsumerMapView에서 클라우드 기반 지도 스타일 지정을 사용하려면 GoogleMapOptionsmapId 필드를 설정하고 GoogleMapOptionsgetConsumerGoogleMapAsync(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 필드를 설정하고 GoogleMapOptionsnewInstance에 전달합니다. 아래 예를 참고하세요.

자바

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을(를) 사용하려면 사용 설정해야 합니다. 자세한 내용은 isAutoCameraEnabled를 참조하세요.

`AutoCamera`

내 위치 버튼에 대한 자세한 내용은 Maps JavaScript API 문서의 내 위치 버튼을 참고하세요.

카메라 동작 맞춤설정

카메라 동작을 더 세부적으로 제어하려면 다음 단계에 따라 AutoCamera를 사용 중지하고 카메라 동작을 수동으로 맞춤설정합니다.

  1. ConsumerController.setAutoCameraEnabled()를 사용하여 AutoCamera를 사용 중지합니다.

  2. ConsumerController.getCameraUpdate()를 사용하여 권장 카메라 경계를 가져옵니다.

  3. 다음 Android 함수 중 하나에 CameraUpdate를 인수로 제공합니다.

다음 단계

Android에서 여행 팔로우하기