Appliquer un style à une carte

Sélectionnez une plate-forme : Android iOS JavaScript

Ce guide décrit comment personnaliser la carte qui s'affiche dans vos l'application Android lorsque vous suivez un trajet. Vous pouvez personnaliser l'apparence la carte de différentes manières:

Appliquer des styles de cartes basés dans le cloud à la carte

Personnaliser l'apparence des composants de cartes à l'aide de cartes dans le cloud du style. Vous pouvez créer et modifier des styles de carte dans la console Google Cloud pour de vos applications qui utilisent Google Maps, sans avoir à modifier votre code. Pour en savoir plus, consultez Styles de cartes basés dans le cloud :

Les ConsumerMapView et ConsumerMapFragment sont compatibles avec les styles de cartes basés dans le cloud. Pour utiliser les styles de cartes basés dans le cloud, assurez-vous que les cartes sélectionnées est LATEST. Les sections suivantes présentent des exemples d'utilisation des styles de cartes basés dans le cloud pour votre projet.

ConsumerMapView

Pour utiliser les styles de cartes basés dans le cloud dans ConsumerMapView, définissez mapId sur GoogleMapOptions et transmettez GoogleMapOptions à getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Exemple

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

Il existe deux façons d'utiliser les styles de cartes basés dans le cloud ConsumerMapFragments:

  • Statiquement avec le XML.
  • Dynamiquement avec newInstance.

De manière statique avec le code XML

Pour utiliser les styles de cartes basés dans le cloud avec le code XML dans la ConsumerMapFragment, ajoutez l'attribut XML map:mapId avec l'attribut mapId Consultez l'exemple ci-dessous :

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

Dynamiquement avec newInstance

Pour utiliser les styles de cartes basés dans le cloud avec newInstance dans ConsumerMapFragment, définissez le champ mapId sur GoogleMapOptions et transmettez la GoogleMapOptions à newInstance. Consultez l'exemple ci-dessous :

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

Ajustez le zoom de l'appareil photo pour faire la mise au point sur un trajet

Pendant une session active de partage de parcours, vous pouvez gérer le zoom de la caméra et vous pouvez vous concentrer de l'une des deux manières suivantes:

  • AutoCamera: si vous souhaitez utiliser AutoCamera, vous n'avez pas de faire quoi que ce soit. La caméra suit le trajet. Pour en savoir plus, consultez AutoCamera

  • Personnaliser le comportement de la caméra : pour personnaliser le comportement de la caméra, procédez comme suit : vous devez désactiver AutoCamera, puis effectuer vos personnalisations. Pour en savoir plus, consultez la section Personnaliser le comportement de la caméra.

AutoCamera centre la caméra

Le SDK grand public fournit une fonctionnalité AutoCamera activée par défaut sur le bouton intégré Ma position pour le SDK Maps. La caméra zoome sur se concentrer sur le partage de l'itinéraire et le point de cheminement du prochain trajet.

Si vous souhaitez utiliser AutoCamera, veillez à l'activer. Pour en savoir plus, consultez isAutoCameraEnabled

`AutoCamera`

Pour plus d'informations sur le bouton Ma position, consultez l'article Bouton "Ma position" dans la documentation de l'API Maps JavaScript.

Personnaliser le comportement de la caméra

Pour mieux contrôler le comportement de la caméra, suivez ces étapes pour désactiver AutoCamera et personnaliser manuellement le comportement de la caméra.

  1. Désactivez AutoCamera à l'aide de ConsumerController.setAutoCameraEnabled().

  2. Obtenez les limites de caméra recommandées à l'aide de ConsumerController.getCameraUpdate().

  3. Fournissez CameraUpdate en tant qu'argument à l'une de ces fonctions Android:

Étape suivante

Suivre un trajet dans Android