지도 스타일 지정

지도 구성요소의 디자인과 분위기를 맞춤설정하려면 클라우드 기반 지도 스타일 지정을 사용하거나 코드에서 직접 옵션을 설정하여 지도의 스타일을 지정하세요.

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

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

자동 맞춤 사용 중지

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

자바스크립트

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,
  ...
});

기존 지도 교체

마커나 기타 맞춤설정이 포함된 기존 지도를 맞춤설정을 잃지 않고 대체할 수 있습니다.

예를 들어 마커가 표시된 표준 google.maps.Map 항목이 있는 웹페이지가 있다고 가정해 보겠습니다.

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
    // Initialize and add the map
    function initMap() {
      // The location of Pier 39 in San Francisco
      var pier39 = {lat: 37.809326, lng: -122.409981};
      // The map, initially centered at Mountain View, CA.
      var map = new google.maps.Map(document.getElementById('map'));
      map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

      // The marker, now positioned at Pier 39
      var marker = new google.maps.Marker({position: pier39, map: map});
    }
        </script>
        <!-- Load the API from the specified URL.
           * The async attribute allows the browser to render the page while the API loads.
           * The key parameter will contain your own API key (which is not needed for this tutorial).
           * The callback parameter executes the initMap() function.
        -->
        <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

JavaScript 차량 추적 라이브러리를 추가하려면 다음 단계를 따르세요.

  1. 인증 토큰 팩토리의 코드를 추가합니다.
  2. initMap() 함수에서 위치 제공자를 초기화합니다.
  3. initMap() 함수에서 지도 뷰를 초기화합니다. 뷰에 지도 포함
  4. 맞춤설정을 지도 뷰 초기화의 콜백 함수로 이동합니다.
  5. API 로더에 위치 라이브러리를 추가합니다.

예약된 태스크를 사용한 지도 교체 예시

다음 예에서는 예약된 작업 사용 사례의 위치 제공업체 객체를 초기화하는 기존 지도를 사용하는 방법을 보여줍니다. 코드는 주문형 이동 사용 사례와 유사하지만 FleetEngineDeliveryVehicleLocationProvider 대신 FleetEngineVehicleLocationProvider를 사용한다는 점을 제외하고는 동일합니다.

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
    let locationProvider;

    // (1) Authentication Token Fetcher
    function authTokenFetcher(options) {
      // options is a record containing two keys called
      // serviceType and context. The developer should
      // generate the correct SERVER_TOKEN_URL and request
      // based on the values of these fields.
      const response = await fetch(SERVER_TOKEN_URL);
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          const data = await response.json();
          return {
            token: data.Token,
            expiresInSeconds: data.ExpiresInSeconds
          };
    }

    // Initialize and add the map
    function initMap() {
      // (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
      // as appropriate.
      locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
        YOUR_PROVIDER_ID,
        authTokenFetcher,
      });

      // (3) Initialize map view (which contains the map).
      const mapView = new google.maps.journeySharing.JourneySharingMapView({
        element: document.getElementById('map'),
        locationProviders: [locationProvider],
        // any styling options
      });

    mapView.addListener('ready', () => {
      locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

        // (4) Add customizations like before.
        // The location of Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
        // The map, initially centered at Mountain View, CA.
        var map = mapView.map;
        map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
        // The marker, now positioned at Pier 39
        var marker = new google.maps.Marker({position: pier39, map: map});
      };
    }
        </script>
        <!-- Load the API from the specified URL
          * The async attribute allows the browser to render the page while the API loads
          * The key parameter will contain your own API key (which is not needed for this tutorial)
          * The callback parameter executes the initMap() function
          *
          * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
        -->
        <script defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
        </script>
      </body>
    </html>

피어 39 근처에서 지정된 ID로 배송 차량을 운전하면 이제 지도에 렌더링됩니다.

다음 단계