このページは Cloud Translation API によって翻訳されました。

地図のスタイルを設定する

地図コンポーネントの外観をカスタマイズするには、Cloud ベースのマップのスタイル設定を使用するか、コードでオプションを直接設定して地図のスタイルを設定します。

Cloud ベースのマップのスタイル設定を使って地図のスタイルを設定する

クラウドベースのマップのスタイル設定を使用して、地図コンポーネントの外観をカスタマイズします。Google マップを使用するすべてのアプリの地図のスタイルは、Google Cloud コンソールで作成、編集できます。コードを変更する必要はありません。詳細については、Cloud ベースのマップのスタイル設定をご覧ください。

Cloud ベースのマップのスタイル設定は、ConsumerMapView クラスと ConsumerMapFragment クラスの両方でサポートされます。Cloud ベースのマップのスタイル設定を使用するには、選択した地図レンダラが LATEST であることを確認してください。以降のセクションでは、プロジェクトでクラウドベースのマップスタイル設定を使用する方法の例を示します。

`ConsumerMapView`

ConsumerMapView でクラウドベースの地図のスタイル設定を使用するには、GoogleMapOptions に mapId フィールドを設定し、GoogleMapOptions を getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) または getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions) に渡します。

例

Java

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 で Cloud ベースのマップのスタイル設定を使用するには、次の 2 つの方法があります。

XML を使用して静的に設定します。
newInstance で動的に。

XML を使用して静的に使用する

ConsumerMapFragment の XML で Cloud ベースのマップのスタイル設定を使用するには、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 を使って Cloud ベースのマップのスタイル設定を使用するには、GoogleMapOptions で mapId フィールドを設定し、GoogleMapOptions を newInstance に渡します。次の例をご覧ください。

Java

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 を使用して地図のスタイルを適用する方法を示しています。

JavaScript

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 をご覧ください。

JavaScript

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

自動フィットを無効にする

自動フィットを無効にすると、地図のビューポートが車両と予想ルートに自動的にフィットしなくなります。次の例は、経路共有のマップビューを構成するときに、自動適合を無効にする方法を示しています。

JavaScript

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 フリートトラックライブラリを追加するには:

認証トークンファクトリのコードを追加します。
initMap() 関数で位置情報プロバイダを初期化します。
initMap() 関数でマップビューを初期化します。ビューには地図が含まれます。
カスタマイズをマップビューの初期化用のコールバック関数に移動します。
位置情報ライブラリを 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 の配送車両を運行している場合、その車両が地図上にレンダリングされるようになりました。

地図のスタイルを設定する

Cloud ベースのマップのスタイル設定を使って地図のスタイルを設定する

ConsumerMapView

例

Java

Kotlin

ConsumerMapFragment

XML を使用して静的に使用する

newInstance で動的に

Java

Kotlin

JavaScript

TypeScript

独自のコード内で直接地図のスタイルを設定

JavaScript

TypeScript

自動フィットを無効にする

JavaScript

TypeScript

既存の地図を置き換える

スケジュール設定されたタスクを使用した地図の置換例

次のステップ

`ConsumerMapView`

`ConsumerMapFragment`

`newInstance` で動的に