지도 스타일 지정

이 문서에서는 지도의 디자인을 맞춤설정하고 데이터 가시성 및 뷰포트 옵션을 제어하는 방법을 설명합니다. 다음과 같은 방법으로 이와 같이 지시할 수 있습니다.

  • 클라우드 기반 지도 스타일 지정 사용
  • 자체 코드에서 지도 스타일 옵션 직접 설정

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

클라우드 기반 지도 스타일 지정을 사용하여 지도 구성요소의 디자인과 분위기를 맞춤설정합니다. 코드를 변경할 필요 없이 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
  }
}

JavaScript 소비자 이동 공유 지도에 지도 스타일을 적용하려면 JourneySharingMapView를 만들 때 mapId 및 기타 mapOptions를 지정합니다.

다음 예는 지도 ID를 사용하여 지도 스타일을 적용하는 방법을 보여줍니다.

자바스크립트

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

자체 코드에서 지도 스타일 지정

JourneySharingMapView를 만들 때 지도 옵션을 설정하여 지도 스타일을 맞춤설정할 수도 있습니다. 다음 예는 지도 옵션을 사용하여 지도의 스타일을 지정하는 방법을 보여줍니다. 설정할 수 있는 지도 옵션에 관한 자세한 내용은 Google Maps JavaScript API 참조의 mapOptions를 참고하세요.

자바스크립트

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

SDK에 대한 태스크 데이터의 공개 상태 제어

가시성 규칙을 사용하여 지도에서 특정 작업 객체의 표시 여부를 제어할 수 있습니다.

작업 데이터 기본 공개 상태

기본적으로 차량에 할당된 작업의 데이터는 차량이 작업의 정류장 5곳 이내에 있을 때 표시됩니다. 작업이 완료되거나 취소되면 공개 상태가 종료됩니다.

이 표에는 각 작업 유형의 기본 공개 상태가 나와 있습니다. 대부분의 할 일의 공개 상태를 맞춤설정할 수 있지만 일부 할 일은 맞춤설정할 수 없습니다. 작업 유형에 관한 자세한 내용은 예약된 작업 가이드의 작업 유형을 참고하세요.

할 일 유형 기본 공개 설정 맞춤설정 가능 여부 설명
이용 불가 태스크 표시 안 됨 아니요 운전자 휴식 및 주유에 사용됩니다. 배송 작업의 경로에 다른 차량 정류장도 포함된 경우, 정류장에 재고 없음 작업만 포함되어 있으면 해당 정류장이 표시되지 않습니다. 배송 작업 자체에는 예상 도착 시간과 예상 작업 완료 시간이 계속 표시됩니다.
차량 작업 열기 표시 예 작업이 완료되거나 취소되면 공개 상태가 종료됩니다. 미완료 차량 작업의 공개 상태를 맞춤설정할 수 있습니다. 미완료 차량 작업의 공개 상태 맞춤설정을 참고하세요.
종료된 차량 작업 표시 안 됨 아니요 종료된 차량 작업의 공개 상태는 맞춤설정할 수 없습니다.

미완료 차량 작업의 표시 여부 맞춤설정

TaskTrackingInfo 인터페이스는 소비자 SDK로 표시할 수 있는 여러 작업 데이터 요소를 제공합니다.

맞춤설정 가능한 할 일 데이터 요소

경로 폴리라인

도착까지의 예상 시간

예상 태스크 완료 시간

할 일까지 남은 운전 거리

남은 정류장 수

차량 위치

태스크별 공개 옵션

Fleet Engine 내에서 태스크를 만들거나 업데이트할 때 TaskTrackingViewConfig를 설정하여 태스크별로 공개 상태 구성을 맞춤설정할 수 있습니다. 다음 공개 상태 옵션을 사용하여 작업 요소의 공개 상태를 결정하는 기준을 만듭니다.

공개 상태 옵션

남은 정류장 수

예상 도착 시간까지의 시간

남은 운전 거리

항상 표시

표시되지 않음

예를 들어 맞춤설정 예시가 다음 표에 표시된 기준을 사용하여 세 가지 데이터 요소의 공개 상태를 조정한다고 가정해 보겠습니다. 다른 모든 요소는 기본 공개 상태 규칙을 따릅니다.

조정할 데이터 요소 공개 상태 기준
경로 폴리라인 표시 차량이 정류장 3곳 이내에 있습니다.
도착예정시간 표시 남은 운전 거리가 5,000미터 미만입니다.
남은 정류장 수 표시 안함 차량이 정류장 3곳 이내에 있습니다.

다음 예는 이 구성을 보여줍니다.

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

경로 다중선 및 차량 위치 공개 상태 규칙

차량 위치도 표시되지 않으면 경로 다중선이 표시되지 않습니다. 그렇지 않으면 다중선의 끝에서 차량 위치를 추론할 수 있습니다.

이 가이드라인은 경로 다중선 및 차량 위치 공개 상태 옵션에 유효한 조합을 제공하는 데 도움이 됩니다.

동일한 공개 상태 옵션 공개 상태 기준 안내
경로 다중선 옵션이 항상 표시되도록 설정되어 있습니다. 차량 위치를 항상 표시되도록 설정합니다.
차량 위치가 '표시되지 않음'으로 설정되어 있습니다. 경로 다중선을 표시되지 않도록 설정합니다.
공개 상태 옵션은 다음 중 하나입니다.
  • 남은 정류장 수
  • ETA까지의 기간
  • 남은 운전 거리

경로 다중선 옵션을 차량 위치에 설정된 값 이하로 설정합니다. 예를 들면 다음과 같습니다.

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
다양한 공개 상태 옵션 공개 상태 기준 안내
차량 위치가 표시됨

이는 차량 위치와 다중선 표시 옵션이 모두 충족된 경우에만 발생합니다. 예를 들면 다음과 같습니다.

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

이 예에서 차량 위치는 남은 정류장 수가 3개 이상 AND 남은 운전 거리가 3, 000미터 이상인 경우에만 표시됩니다.

자동 맞춤 사용 중지

자동 맞춤을 사용 중지하면 지도에서 표시 영역이 차량 및 예상 경로에 자동으로 맞춰지지 않도록 할 수 있습니다. 다음 예는 경로 공유 지도 보기를 구성할 때 자동 맞춤을 사용 중지하는 방법을 보여줍니다.

자바스크립트

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

다음 단계