Créer des ID de carte

Android

Vous pouvez ajouter votre ID de carte via un élément <fragment> du fichier de mise en page de l'activité, à l'aide de la classe MapView ou de manière programmatique avec la classe GoogleMapOptions.

Par exemple, supposons que vous ayez créé un ID de carte stocké sous la forme d'une valeur de chaîne nommée map_id dans res/values/strings.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

Pour les cartes ajoutées via un élément <fragment> dans le fichier de mise en page de l'activité, tous les fragments de carte censés être associés au style personnalisé doivent spécifier l'ID de carte dans l'attribut map:mapId :

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

Vous pouvez également utiliser l'attribut map:mapId de la classe MapView pour spécifier un ID de carte :

<com.google.android.gms.maps.MapView
    xmlns:map="http://schemas.android.com/apk/res-auto"
    ....
    map:mapId="@string/map_id" />

Pour spécifier un ID de carte de manière programmatique, transmettez-le à une instance MapFragment à l'aide de la classe GoogleMapOptions :

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

Dans Android Studio, créez et exécutez votre application comme vous le faites d'habitude. Les styles personnalisés configurés à la première étape sont appliqués à toutes les cartes avec l'ID de carte spécifié.

Android 3D

Définissez la propriété de chaîne mapId sur Map3DOptions de manière programmatique ou à l'aide d'attributs de mise en page. Les Map3DOptions sont fournies à l'objet Map3DView lors de l'instanciation et ne peuvent plus être modifiées une fois Map3DView créé.

Les développeurs peuvent éventuellement implémenter un nouvel OnMapIdErrorListener pour être avertis et réagir à un ID de carte non valide ou introuvable.

Ajoutez un ID de carte, créez la carte de manière programmatique et définissez un OnMapIdErrorListener :

import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DOptions
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback
import com.google.android.gms.maps3d.model.Map3DMode

class MainActivity : Activity(), OnMap3DViewReadyCallback, OnMapIdError {
  fun onCreate(...) {
    val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
    val map3DView = Map3DView(context, map3DOptions)
    map3DView.getMap3dViewAsync(this)
  }

  override fun onMap3DViewReady(googleMap3D: GoogleMap3D) {
    googleMap3D.setMapIdErrorListener(
      object : OnMapIdErrorListener {
        override fun onMapIdError() {
          // Handle error event.
        }
      }
    )
  }
}

Ajoutez un ID de carte à l'aide d'attributs de mise en page :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:map3d="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent" android:layout_height="match_parent">
 <com.google.android.gms.maps3d.Map3DView
     android:id="@+id/map3dView"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     map3d:mode="hybrid"
     map3d:mapId="MAP_ID"/>
</LinearLayout>

iOS

Pour instancier une carte à l'aide d'un ID de carte, procédez comme suit :

1. Créez un GMSMapID avec la chaîne d'ID de carte de la console Cloud.
2. Créez un GMSMapView en spécifiant l'ID de carte que vous venez de créer.

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

Si vous utilisez votre propre ID de carte, vous pouvez le définir dans la console Cloud pour qu'il ait un nouveau style à tout moment. Ce style sera automatiquement reflété sur votre vue de carte pour vous et les utilisateurs dans un délai d'environ six heures.

Si vous souhaitez voir les modifications immédiatement, vous pouvez fermer et redémarrer votre application en la quittant, en forçant son arrêt à partir de la liste des applications récemment utilisées, puis en la rouvrant. La carte mise à jour sera alors visible.

iOS 3D

Les développeurs iOS peuvent définir un nouveau modificateur style sur Map. Ce modificateur accepte un ID de carte et, éventuellement, une fermeture à appeler lorsque l'ID de carte n'est pas valide ou introuvable.

import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
        latitude: 0.0,
        longitude: 0.0,
      ),
      mode: .hybrid
    )
    .style(
      with: "MAP_ID",
      error: {
        // Handle styling error.
      }
    )
    // Could also use trailing closure syntax
    //  .style(with: "MAP_ID") {
    //     // Handle styling error.
    //  }
  }
}

JavaScript

Pour créer une carte avec un ID de carte dans le code de votre application :

1. Si vous personnalisez déjà votre carte avec du code JSON intégré, supprimez la styles propriété de votre MapOptions objet. Sinon, ignorez cette étape.

2. Ajoutez un ID de carte à la carte à l'aide de la propriété mapId. Exemple :

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

JavaScript 3D

Pour créer une carte avec un ID de carte dans votre application, ajoutez un ID de carte à la carte à l'aide de la propriété mapId. Exemple :

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();
index.js

Maps Static

Pour ajouter un ID de carte à une carte nouvelle ou existante qui utilise l'une de nos API de service Web, ajoutez le paramètre d'URL map_id et définissez-le sur votre ID de carte. Cet exemple montre comment ajouter un ID de carte à une carte à l'aide de l'API Maps Static.

<img src="/maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=%3Cspan%20data-devsite-credential-type="api_key" class="replaceable-credential">YOUR_API_KEY&map_id=MAP_ID&signature=YOUR_SIGNATURE" />