Configurar un mapa

Selecciona la plataforma: Android iOS

Para seguir un viaje en tu aplicación para consumidores, primero debes definir un mapa y agregar compatibilidad con los mapas de vectores, si es necesario.

Para configurar un mapa en tu app, sigue estos pasos:

  1. Define un fragmento de mapa para compartir recorridos.
  2. Agrega compatibilidad con una capa base de Maps y un controlador de vista.
  3. Cómo agregar compatibilidad con gráficos vectoriales de Android para mostrar vectores si es necesario.

Después de definir un mapa, puedes agregar vistas y cámaras adicionales controles que quieres personalizar para personalizar la experiencia visual. Para obtener más detalles, consulta Cómo aplicar diseño a un mapa.

Paso 1: Define un fragmento de mapa para compartir viajes

Para definir un mapa, agrega un fragmento o una vista del mapa para crear el mapa, compartes un viaje a pedido en tu aplicación para consumidores. Para definir tu mapa, sigue uno de estos métodos:

  • ConsumerMapFragment: Se usa para definir tu mapa con una Fragment

  • ConsumerMapView: Se usa para definir un mapa con una View

Las funciones son las mismas para cualquiera de los métodos, así que elige qué método es mejor para tu aplicación.

Ambos métodos se explican con más detalle en la siguiente sección.

Cómo agregar un fragmento de mapa o una vista

Para crear un mapa que muestre el progreso del viaje mediante un fragmento o una vista de Android, sigue estos pasos y consulta la ejemplos de código.

  1. Define un fragmento o una vista en el archivo XML de diseño de tu aplicación ubicado en /res/layout Define el mapa para compartir el recorrido como un fragmento con ConsumerMapFragment o como una vista con ConsumerMapView.

    El fragmento o la vista proporcionan acceso al recorrido. al que tu app pueda acceder y modificar. El mapa también proporciona un controlador a ConsumerController, lo que permite que tu app controle y personalizar la experiencia de compartir recorridos.

  2. Desde tu método onCreate(), llama a getConsumerGoogleMapAsync(callback), que muestra el ConsumerGoogleMap de forma asíncrona en la devolución de llamada.

  3. Usa ConsumerGoogleMap para mostrar el progreso del viaje y actualizarlo según sea necesario.

Ejemplo de cómo agregar ConsumerMapFragment

  1. Define el fragmento en el archivo XML de diseño de tu aplicación, como se muestra en el siguiente ejemplo de código.

    <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. Realizar una llamada a getConsumerGoogleMapAsync() desde onCreate() .

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()!!
         }
       }
     )
   }
 }

Ejemplo de cómo agregar ConsumerMapView

  1. Usa la vista en un fragmento o en una actividad, como se define en tu 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. Realiza la llamada a getConsumerGoogleMapAsync() desde onCreate(). En Además del parámetro de devolución de llamada, incluye los siguientes detalles:

    • La actividad o el fragmento que los contiene. La base de la actividad o el fragmento la clase debe ser FragmentActivity o Fragment de asistencia. (respectivamente), ya que proporcionan acceso a su ciclo de vida.

    • GoogleMapOptions (que puede ser nulo), que contiene la configuración para el 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,
    )
  }
}

Un MapView en un fragmento es el mismo que en el ejemplo anterior para MapView en una actividad, con la excepción de que el fragmento aumenta el diseño que incluye el MapView en el método del fragmento onCreateView().

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)
  }
}

Paso 2: Agrega compatibilidad con una capa base de Maps y un controlador de vistas

Para habilitar la opción para compartir viajes en tu app, agrega el siguientes clases a tu app: ConsumerGoogleMap y ConsumerController.

  • Obtén ConsumerGoogleMap de ConsumerMapFragment o ConsumerMapView, que se muestran de forma asíncrona ConsumerGoogleMap en ConsumerMapReadyCallback

    ConsumerGoogleMap es una clase wrapper para la clase GoogleMap. Utiliza un Una API equivalente a GoogleMap para que tu app pueda interactuar con el mapa De esta manera, tu app puede interactuar sin problemas con la misma interfaz de usuario mapa. Por ejemplo, GoogleMap solo permite un registro de devolución de llamada, pero ConsumerGoogleMap admite devoluciones de llamada registradas duales. Estas devoluciones de llamada permiten tu app registran devoluciones de llamada a las que se llama de forma secuencial.

  • Obtén ConsumerController de ConsumerGoogleMap en getConsumerController().

    ConsumerController brinda acceso a funciones de viajes compartidos, como como supervisar viajes, controlar el estado de los viajes y establecer ubicaciones.

Para saber cómo agregar ConsumerGoogleMap y ConsumerController a tu app en Java y Kotlin, consulta los siguientes ejemplos.

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

Paso 3: Agrega compatibilidad con gráficos vectoriales de Android

Si el diseño de tu aplicación requiere compatibilidad con gráficos vectoriales, agrega compatibilidad con Sigue estos pasos para los dispositivos Android y los elementos de diseño vectoriales:

  1. Agrega el siguiente código a tu actividad. Este código extiende AppCompatActivity para usar los elementos de diseño vectoriales en el SDK de consumidor

Java

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

// ...

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

Kotlin

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

// ...

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

Próximos pasos

Cómo seguir un viaje en Android Cómo aplicar diseño a un mapa