Aplica diseño a un mapa

Selecciona la plataforma: Android iOS JavaScript

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

Personaliza el mapa con el diseño de mapas basado en Cloud

Personaliza el aspecto del componente de mapas con mapas basados en la nube estilo. Puedes crear y editar diseños de mapa en la consola de Google Cloud de cualquier de las aplicaciones que usan Google Maps, sin necesidad de aplicar cambios en el código. Para obtener más información, consulta Diseño de mapas basado en Cloud.

Ambos ConsumerMapView y las ConsumerMapFragment clases admiten el diseño de mapas basado en Cloud. Para usar el diseño de mapas basado en Cloud, asegúrate de que los mapas seleccionados El procesador es LATEST. En las siguientes secciones, se muestran ejemplos de cómo usar diseño de mapas basado en Cloud con tu proyecto.

ConsumerMapView

Para utilizar el diseño de mapas basado en Cloud en ConsumerMapView, configura la mapId en GoogleMapOptions y pasa 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 utilizar el diseño de mapas basado en Cloud en ConsumerMapFragments:

  • De forma estática, con el XML.
  • De forma dinámica con newInstance

De forma estática con el XML

Para usar el diseño de mapas basado en la nube con el XML en ConsumerMapFragment, agrega el atributo XML map:mapId con el mapId especificado. 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"/>

De forma dinámica con newInstance

Para usar el diseño de mapas basado en la nube con newInstance en ConsumerMapFragment, configura el campo mapId en GoogleMapOptions y pasa el 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 enfocar un viaje

Durante una sesión activa en la que se comparte un viaje, puedes controlar el zoom de la cámara y el enfoque de una de estas dos maneras:

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

  • Personalizar 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 Cómo personalizar el comportamiento de la cámara.

AutoCamera centra la cámara

El SDK para consumidores proporciona una función AutoCamera que está habilitada de forma predeterminada en el botón integrado Mi ubicación del SDK de Maps. El zoom de la cámara se centrará en la ruta para compartir el viaje y en el próximo punto de referencia del viaje.

Si quieres usar AutoCamera, asegúrate de habilitarlo. Consulta isAutoCameraEnabled para obtener más información.

&quot;AutoCamera&quot;

Para obtener más información sobre el botón Mi ubicación, consulta la sección Botón Mi ubicación en la documentación de la API de Maps JavaScript.

Cómo personalizar el comportamiento de la cámara

Si quieres tener más control sobre el comportamiento de la cámara, sigue estos pasos para inhabilitarla AutoCamera y personaliza el comportamiento de la cámara de forma manual.

  1. Inhabilita AutoCamera con ConsumerController.setAutoCameraEnabled().

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

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

¿Qué sigue?

Cómo seguir un viaje en Android