Aplica diseño a un mapa

Selecciona la plataforma: Android iOS JavaScript

En esta guía, se describen las formas en que puedes personalizar el mapa que se muestra en tu app para Android cuando sigues un viaje. Puedes personalizar la apariencia del mapa de las siguientes maneras:

Diseña el mapa con el diseño de mapas basado en Cloud

Personaliza la apariencia del componente de mapas con el diseño de mapas basado en Cloud. Puedes crear y editar diseños de mapas en la consola de Google Cloud para cualquiera de tus apps que usen Google Maps sin necesidad de hacer cambios en tu código. Para obtener más información, selecciona tu plataforma en Diseño de mapas basado en Cloud.

Las clases ConsumerMapView y ConsumerMapFragment admiten el diseño de mapas basado en Cloud. Para usar el diseño de mapas basado en Cloud, asegúrate de que el renderizador de mapas seleccionado sea LATEST. En las siguientes secciones, se muestran ejemplos de cómo usar el diseño de mapas basado en Cloud con tu proyecto.

ConsumerMapView

Para usar el diseño de mapas basado en Cloud en el ConsumerMapView, configura el mapId campo en GoogleMapOptions y pasa el GoogleMapOptions a getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) o getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Ejemplo

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

Hay dos formas de usar el diseño de mapas basado en Cloud en ConsumerMapFragments:

  • Estáticamente con el XML
  • Dinámicamente con newInstance

Estáticamente con el XML

Para usar el diseño de mapas basado en Cloud con el XML en el ConsumerMapFragment, agrega el map:mapId atributo XML con el especificado mapId. Consulta el siguiente ejemplo:

<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"/>

Dinámicamente con newInstance

Para usar el diseño de mapas basado en Cloud con newInstance en ConsumerMapFragment, configura el campo mapId en GoogleMapOptions y pasa GoogleMapOptions a newInstance. Consulta el siguiente ejemplo:

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

Ajusta el zoom de la cámara para enfocarte en un viaje

Durante una sesión activa de uso compartido de viajes, puedes controlar el zoom y el enfoque de la cámara de una de las siguientes maneras:

  • AutoCamera: Si deseas usar AutoCamera, no tienes que hacer nada. La cámara sigue el viaje. Para obtener más información, consulta AutoCamera.

  • Personaliza el comportamiento de la cámara: Para personalizar el comportamiento de la cámara, debes inhabilitar AutoCamera y, luego, realizar las personalizaciones. Para obtener más información, consulta Personaliza el comportamiento de la cámara.

AutoCamera centra la cámara

El SDK de Consumer proporciona una función AutoCamera que está habilitada de forma predeterminada en el botón integrado Mi ubicación para el SDK de Maps. La cámara hace zoom para enfocarse en la ruta del viaje y el siguiente punto de ruta del viaje.

Si deseas usar AutoCamera, asegúrate de habilitarla. Para obtener más información, consulta isAutoCameraEnabled.

`AutoCamera`

Para obtener detalles sobre el botón Mi ubicación, consulta el botón Mi ubicación en la documentación de la API de Maps JavaScript.

Personaliza el comportamiento de la cámara

Para tener más control sobre el comportamiento de la cámara, sigue estos pasos para inhabilitar AutoCamera y personalizar el comportamiento de la cámara de forma manual.

  1. Inhabilita AutoCamera con ConsumerController.setAutoCameraEnabled().

  2. Obtén los límites recomendados de la cámara con ConsumerController.getCameraUpdate().

  3. Proporciona el CameraUpdate como argumento a una de estas funciones de Android:

¿Qué sigue?

Sigue un viaje en Android