地図をセットアップする

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

コンシューマー アプリで旅行を追跡するには、まず地図を定義し、必要に応じてベクター地図のサポートを追加する必要があります。

アプリで地図を設定する手順は次のとおりです。

  1. 旅行を追跡するマップ フラグメントを定義します。
  2. 地図のベースレイヤとビュー コントローラのサポートを追加。
  3. 必要に応じて、Android ベクター グラフィックのサポートを追加して、ベクターマップを表示します。

地図を定義したら、視覚的な操作をカスタマイズするために、追加のビューとカメラ コントロールを追加できます。詳しくは、地図のスタイルを設定するをご覧ください。

ステップ 1: 旅行を追跡するマップ フラグメントを定義する

地図を定義するには、地図のフラグメントまたはビューを追加して、オンデマンドの乗車をユーザー向けアプリで共有する地図を作成します。地図を定義するには、次のいずれかの方法を使用します。

  • ConsumerMapFragment: Fragment を使用してマップを定義します。

  • ConsumerMapView: View を含むマップを定義するために使用します。

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

以降のセクションでは、この両方の方法について詳しく説明します。

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

Android フラグメントまたはビューを使用して乗車中の進行状況を表示する地図を作成する手順は次のとおりです。コード例も参照してください。

  1. /res/layout にあるアプリのレイアウト XML ファイルで、フラグメントまたはビューを定義します。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（それぞれ）のいずれかである必要があります。

    • MapView の構成属性を含む GoogleMapOptions（null 可）。

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 クラスを追加します。

  • ConsumerMapFragment または ConsumerMapView のいずれかから ConsumerGoogleMap を取得します。どちらも ConsumerMapReadyCallback で ConsumerGoogleMap を非同期で返します。

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

  • getConsumerController() の ConsumerGoogleMap から ConsumerController を取得します。

    ConsumerController は、乗車状況のモニタリング、乗車状況の制御、場所の設定などの乗車共有機能へのアクセスを提供します。

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

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. アクティビティに次のコードを追加します。このコードは、Consumer SDK でベクター型ドローアブルを使用するために AppCompatActivity を拡張します。

Java

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

// ...

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

Kotlin

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

// ...

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

次のステップ

Android で旅行をフォローする

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