Aplica diseño a un mapa

Selecciona la plataforma: Android iOS JavaScript

En esta guía, se describen las formas en las que puedes aplicar diseño al mapa que se muestra en tu app para iOS cuando sigues un viaje.

Antes de comenzar

Antes de aplicar el diseño a un mapa, debes tener una app para consumidores con lo siguiente implementado:

• Una vista de mapa Consulta Cómo inicializar la vista de mapa.

• Es una forma de controlar los eventos de la vista del mapa. Consulta Cómo controlar eventos de vista de mapa.

También debes configurar los servicios de backend que necesita el SDK de Consumer y configurar el SDK de Consumer. Para obtener más información, consulta Cómo configurar el SDK para el consumidor y ¿Qué es Fleet Engine?.

Personalizaciones de mapas

Las personalizaciones disponibles son las siguientes:

• Aplicar diseño al mapa: Puedes aplicar diseño a los colores, los polilíneas y otros componentes del mapa con el diseño de mapas basado en Cloud. Consulta Cómo aplicar diseño al mapa.

• Ajustar el zoom de la cámara: Puedes usar la función integrada o configurar tus propias opciones de cámara para enfocarte en un viaje. Consulta Cómo ajustar el zoom de la cámara para enfocar un viaje.

• Personaliza marcadores y polilíneas: Puedes agregar marcadores personalizados y rutas de polilíneas al diseño de tu app. Estos elementos de diseño permiten que tu app para consumidores muestre una vista previa dinámica de la ruta del vehículo. Consulta Cómo personalizar marcadores y Cómo personalizar polilíneas.

  El SDK proporciona estas opciones a través de la propiedad consumerMapStyleCoordinator. Esta propiedad está disponible a través de la clase GMTCMapView.

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

Personaliza el aspecto del componente de mapas con el diseño de mapas basado en Cloud. Puedes crear y editar diseños de mapa 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, consulta Diseño de mapas basado en la nube.

Tanto las clases ConsumerMapView como ConsumerMapFragment admiten el diseño de mapas basado en Cloud. Para utilizar el diseño de mapas basado en Cloud, asegúrate de que el procesador de mapas seleccionado sea LATEST. En las siguientes secciones, se muestran ejemplos de cómo usar los diseños de mapas basados en la nube con tu proyecto.

ConsumerMapView

Para usar el diseño de mapas basado en Cloud en ConsumerMapView, configura el campo 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

Existen dos formas de usar 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 Cloud con el XML en el 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 de uso compartido de viajes, es útil que el usuario vea una vista más amplia del vehículo a lo largo de su viaje en lugar de una perspectiva en primer plano del vehículo en una ruta. Para ello, debes ajustar el nivel de zoom de la cámara con el objeto AutoCamera integrado o personalizar el comportamiento de la cámara de la siguiente manera:

• AutoCamera: Si deseas usar AutoCamera, no tienes que hacer nada. La cámara sigue el viaje de forma predeterminada.

• Personalizar el comportamiento de la cámara: Para personalizar el comportamiento de la cámara, debes inhabilitar AutoCamera y, luego, realizar tus personalizaciones.

AutoCamera centra la cámara de forma predeterminada.

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

Si deseas usar AutoCamera, asegúrate de que esté habilitado. Consulta allowCameraAutoUpdate para obtener más información.

Para obtener detalles sobre el botón Mi ubicación del SDK de Maps, consulta el botón Mi ubicación en la documentación del SDK de Maps para iOS.

Cómo personalizar el comportamiento de la cámara

Para tener más control sobre el comportamiento de la cámara, puedes inhabilitar AutoCamera y personalizar el comportamiento de la cámara.

Inhabilita o habilita AutoCamera con la propiedad AllowCameraAutoUpdate.

Para obtener más personalizaciones de la cámara, consulta Cómo mover la cámara en la documentación del SDK de Maps para iOS.

¿Qué sigue?

Cómo seguir un viaje en iOS