地図をセットアップする

プラットフォームを選択: Android iOS

一般ユーザー向けアプリでルートを追跡するには、まず 必要に応じてベクターマップのサポートを追加します。

アプリでマップをセットアップする手順は次のとおりです。

  1. 移動経路の共有に使用する地図フラグメントを定義する
  2. マップのベースレイヤとビュー コントローラのサポートを追加する。
  3. ベクターを表示する Android ベクター グラフィックのサポートを追加 必要に応じて追加できます。

地図を定義したら、ビューやカメラを追加できます。 表示内容をカスタマイズできます。詳しくは 地図のスタイルを設定するをご覧ください。

ステップ 1: 経路の共有に使用する地図フラグメントを定義する

地図のフラグメントまたはビューを追加して地図を定義し、 一般ユーザー向けアプリでオンデマンドの旅行を共有する場合。地図を定義するには、 次のいずれかの方法に従います。

  • ConsumerMapFragment: 地図を Fragment。

  • ConsumerMapView: 以下を使用して地図を定義します。 View。

機能はどちらの方法でも同じなので、どちらの方法を選んでください。 アプリケーションに適しています

どちらの方法も、次のセクションで詳しく説明します。

地図のフラグメントまたはビューを追加する

次のいずれかの方法で、移動状況を表示する地図を作成します。 作成する場合は、以下の手順に沿って、Android アプリの 見てみましょう。

  1. 次の場所にあるアプリケーション レイアウト XML ファイルでフラグメントまたはビューを定義します。 /res/layout。以下のコマンドを使用して、ジャーニー共有マップをフラグメントとして定義します。 ConsumerMapFragment、または ConsumerMapView を使用したビューとして。

    フラグメントまたはビューからジャーニーへのアクセスが可能になる アプリがアクセスおよび変更できる共有マップです。このマップには ConsumerController へのハンドル。これにより、アプリは 体験の共有をカスタマイズできます

  2. onCreate() メソッドから getConsumerGoogleMapAsync(callback) を呼び出します。 これにより、コールバックで非同期に ConsumerGoogleMap が返されます。

  3. ConsumerGoogleMap を使用して移動状況を表示し、必要に応じて更新します。

ConsumerMapFragment を追加する方法の例

  1. 以下に示すように、アプリケーション レイアウト XML ファイルでフラグメントを定義します。 見てみましょう。

    <fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  2. onCreate() から getConsumerGoogleMapAsync() に発信します メソッドを呼び出します。

Java

 public class SampleAppActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {

     // Find the ConsumerMapFragment.
     ConsumerMapFragment consumerMapFragment =
         (ConsumerMapFragment) fragmentManager.findFragmentById(R.id.consumer_map_fragment);

     // Initiate the callback that returns the map.
     if (consumerMapFragment != null) {
       consumerMapFragment.getConsumerGoogleMapAsync(
           new ConsumerMapReadyCallback() {
             // The map returned in the callback is used to access the ConsumerController.
             @Override
             public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
               ConsumerController consumerController = consumerGoogleMap.getConsumerController();
             }
           });
     }
   }

 }

Kotlin

 class SampleAppActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     // Find the ConsumerMapFragment.
     val consumerMapFragment =
       fragmentManager.findFragmentById(R.id.consumer_map_fragment) as ConsumerMapFragment

     consumerMapFragment.getConsumerGoogleMapAsync(
       object : ConsumerMapReadyCallback() {
         override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
           val consumerController = consumerGoogleMap.getConsumerController()!!
         }
       }
     )
   }
 }

ConsumerMapView を追加する方法の例

  1. ビューは、 XML ファイル。

     <com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapView
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/consumer_map_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent" />

  2. onCreate() から getConsumerGoogleMapAsync() を呼び出します。イン に次の詳細情報を含めます。

    • 含まれるアクティビティまたはフラグメント。アクティビティまたはフラグメントのベース クラスは、FragmentActivity またはサポート Fragment のいずれかでなければなりません。 という 2 つのプロパティがあります。

    • 設定を含む GoogleMapOptions（null の場合もあります） MapView の属性。

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            // The map returned in the callback is used to access the ConsumerController.
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              ConsumerController consumerController = consumerGoogleMap.getConsumerController();
            }
          }, this, null);
    }
  }

}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    mapView.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        // The map returned in the callback is used to access the ConsumerController.
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          val consumerController = consumerGoogleMap.getConsumerController()!!
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ null,
    )
  }
}

フラグメント内の MapView は、 アクティビティ内の MapView。ただし、フラグメントが、 フラグメントの onCreateView() メソッドに MapView が含まれている。

Java

public class MapViewInFragment extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater layoutInflater,
      @Nullable ViewGroup viewGroup,
      @Nullable Bundle bundle) {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false);
  }

}

Kotlin

class MapViewInFragment : Fragment() {
  override fun onCreateView(
    layoutInflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?,
  ): View {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false)
  }
}

ステップ 2: 地図のベースレイヤとビュー コントローラのサポートを追加する

アプリでジャーニーの共有を有効にするには、 ConsumerGoogleMap クラスと ConsumerController クラスをアプリに追加します。

  • ConsumerGoogleMap を ConsumerMapFragment から入手するか、 ConsumerMapView はどちらも非同期で返されます。 ConsumerGoogleMap（ConsumerMapReadyCallback）。

    ConsumerGoogleMap は GoogleMap クラスのラッパークラスです。使用される GoogleMap と同等の API。アプリで地図を操作できます。 これにより、アプリは基盤となる Google Cloud サービスとシームレスに 表示されます。たとえば、GoogleMap では 1 つのコールバックの登録しか許可されませんが、 ConsumerGoogleMap はデュアル登録されたコールバックをサポートしています。これらのコールバックにより、 アプリは順番に呼び出されるコールバックを登録します。

  • getConsumerController() の ConsumerGoogleMap から ConsumerController を入手できます。

    ConsumerController では、ジャーニーの共有機能（ ルートの確認、ルートの状況の制御、場所の設定などができます。

ConsumerGoogleMap と ConsumerController をアプリに追加する方法については、 Java と Kotlin については、次の例をご覧ください。

Java

private ConsumerGoogleMap consumerGoogleMap;
private ConsumerController consumerController;
private ConsumerMapView consumerMapView;

consumerMapView.getConsumerGoogleMapAsync(
    new ConsumerMapReadyCallback() {
      @Override
      public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerMap) {
        consumerGoogleMap = consumerMap;
        consumerController = consumerMap.getConsumerController();
      }
    },
    this, null);

Kotlin

var consumerGoogleMap: ConsumerGoogleMap
var consumerController: ConsumerController
val consumerMapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

consumerMapView.getConsumerGoogleMapAsync(
  object : ConsumerMapReadyCallback() {
    override fun onConsumerMapReady(consumerMap: ConsumerGoogleMap) {
      consumerGoogleMap = consumerMap
      consumerController = consumerMap.getConsumerController()
    },
    /* fragmentActivity= */ this,
    /* googleMapOptions= */ null,
  }
)

ステップ 3: Android ベクター グラフィックのサポートを追加する

アプリの設計でベクター グラフィックのサポートが必要な場合は、以下をサポートします。 Android デバイスとベクター型ドローアブルを使用する手順は次のとおりです。

  1. アクティビティに次のコードを追加します。このコードは AppCompatActivity: Consumer SDK のベクター型ドローアブルを使用します。

Java

// ...
import android.support.v7.app.AppCompatActivity;

// ...

public class ConsumerTestActivity extends AppCompatActivity {
  // ...
}

Kotlin

// ...
import android.support.v7.app.AppCompatActivity

// ...

class ConsumerTestActivity : AppCompatActivity() {
  // ...
}

次のステップ

Android でルートを追跡する 地図のスタイルを設定する