지도 스타일 지정

플랫폼 선택: Android iOS JavaScript

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

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

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

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" }
        ]
      }
    ]
  }
});

지도에 정보 표시

InfoWindow를 사용하여 차량 또는 위치 마커에 관한 추가 정보를 표시합니다. 자세한 내용은 InfoWindow를 참고하세요.

다음 예에서는 InfoWindow를 만들고 차량 마커에 연결하는 방법을 보여줍니다.

자바스크립트

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 2. Attach the info window to a vehicle marker.
  // This property can return multiple markers.
  const marker = mapView.vehicleMarkers[0];
  infoWindow.open(mapView.map, marker);
});

// 3. Close the info window.
infoWindow.close();

자동 맞춤 사용 중지

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

자바스크립트

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

다음 단계

마커 맞춤설정하기