Personnalisation de cartes dans Google Cloud

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Google Maps Platform propose des fonctionnalités de personnalisation de cartes dans Google Cloud qui vous permettent de styliser, personnaliser et gérer plus facilement vos cartes en utilisant la console Google Cloud. Vous pouvez ainsi créer une expérience personnalisée pour vos utilisateurs sans avoir à modifier le code de vos applications dès que vous modifiez le style.

Les styles créés avant le 15 septembre 2020 n'afficheront pas les éléments géographiques naturels améliorés de Google Maps. Pour que ceux-ci soient compatibles avec votre carte, vous devez créer un style de carte.

Les fonctionnalités de personnalisation de cartes dans Google Cloud vous permettent de créer et de modifier des styles de carte pour toutes les applications qui utilisent Google Maps, sans avoir à modifier votre code une fois l'ID de carte implémenté. Vous pouvez effectuer toutes les modifications de style dans la console Google Cloud, sans avoir aucune compétence en codage. Modifiez l'apparence et la couleur de nombreux éléments de la carte, comme les routes, les bâtiments, les plans d'eau, les points d'intérêt et les itinéraires des transports en commun.

Voici certaines des fonctionnalités incluses :

  • Personnalisation de cartes dans Google Cloud : au lieu de styliser votre carte dans le code au format JSON, gérez et stylisez vos cartes dynamiques ou statiques dans la console Cloud, en utilisant des ID de carte et des styles de carte.
  • Carte vectorielle : les développeurs JavaScript peuvent utiliser la même carte vectorielle accélérée par WebGL que celle disponible directement sur maps.google.fr dans leurs propres applications Web.
  • Filtrage des POI commerciaux : vous pouvez supprimer cinq catégories de points d'intérêt commerciaux de la carte.
  • Contrôle de la densité des POI : sur la carte de base, vous pouvez ajuster la densité des POI pour en afficher un nombre plus ou moins élevé par défaut.

La personnalisation de cartes dans Google Cloud est disponible dans le SDK Maps pour Android1, le SDK Maps pour iOS, JavaScript et l'API Maps Static, mais certaines fonctionnalités ne sont pas visibles sur toutes les plates-formes.

Avant de commencer

  • Créez un ID de carte
    Pour utiliser la personnalisation de cartes dans Google Cloud, votre carte doit être chargée à l'aide d'un ID de carte.
  • Effectuer une migration à partir d'un style codé en dur
    Avant d'ajouter un ID de carte pour utiliser un style de carte dans le cloud sur une carte existante qui est personnalisée avec un style codé en dur, tel que des paramètres de requête JSON ou d'URL, nous vous recommandons de supprimer le style codé en dur pour éviter tout conflit potentiel avec les fonctionnalités futures. Vous pouvez importer votre style JSON dans un nouveau style de carte.
* Mettez à jour le SDK Maps pour Android
Afin de personnaliser vos cartes dans Google Cloud, vous devez utiliser la version 18.0.0 ou une version ultérieure du SDK Maps pour Android, ainsi que la dernière version du moteur de rendu correspondant.

Facturation

L'utilisation de la personnalisation de cartes dans Google Cloud nécessite un ID de carte. Sur les SDK Maps pour Android, Maps pour iOS et JavaScript, l'utilisation d'un ID de carte entraîne des frais pour le code SKU Dynamic Maps. et des frais liés au code SKU Static Maps dans l'API Maps Static.

Exemples

Android

Exécuter l'application exemple ApiDemos

Pour exécuter l'exemple d'application ApiDemos, consultez l'exemple GitHub (Java | Kotlin) et regardez la démonstration CloudBasedMapStylingDemoActivity (Java | Kotlin).

Vous trouverez un exemple d'application Java et Kotlin qui montre comment styliser votre carte Android à partir du cloud.

Problèmes connus

Une fois votre application livrée aux clients, vous pouvez modifier les styles personnalisés des cartes avec ID de carte depuis la console Google Cloud. Les nouveaux styles apparaîtront dans votre application quelques heures plus tard.

Pour vous assurer que les nouveaux styles personnalisés s'affichent immédiatement à des fins de test, effacez les données de l'application sur votre appareil de test. Pour savoir comment supprimer des données sur votre appareil, consultez l'aide Android – Libérer de l'espace.

Notez que les paramètres peuvent varier selon le téléphone. Pour en savoir plus, contactez le fabricant de votre appareil.

iOS

Exécuter l'application exemple ApiDemos

Pour exécuter l'exemple d'application ApiDemos, consultez l'exemple d'application GoogleMap et consultez le projet CloudBasedMapStylingViewController (exemple GitHub pour Swift | Objective-C).

Démonstration facultative de Cloud Styling CocoaPod ou GitHub

Au lieu de partir de zéro, vous pouvez essayer notre exemple d'application Objective-C qui montre comment appliquer un style à votre carte iOS à partir du cloud en cliquant ici.

Créer l'application de démonstration bêta

Dans Xcode, cliquez sur le bouton de compilation pour créer puis exécuter le schéma actuel. La compilation génère une erreur, vous invitant à saisir votre clé API dans le fichier SDKDemoAPIKey.h.

Si vous ne disposez pas encore d'une clé API, suivez ces instructions pour configurer un projet dans Cloud Console et obtenir une clé API. Lorsque vous configurez la clé sur Cloud Console, vous pouvez spécifier l'identifiant de bundle de votre application pour vous assurer que seule votre application peut l'utiliser. L'identifiant de groupe par défaut de l'application d'exemples de SDK est com.example.GoogleMapsDemos.

Modifiez le fichier SDKDemoAPIKey.h et collez votre clé API dans la définition de la constante kAPIKey:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

Si Xcode vous invite à déverrouiller le fichier SDKDemoAPIKey.h pour le modifier, sélectionnez Déverrouiller.

Supprimez la ligne suivante:

```
#error Register for API Key and insert here.
```

Créez et exécutez le projet.

Démonstration de la personnalisation de cartes dans Google Cloud

La démonstration de CloudStyling montre comment styliser la carte à l'aide d'un style défini dans Google Cloud Console.

Au lancement de l'application de démonstration, cliquez sur la démonstration de personnalisation de la carte dans la section "Exemples bêta" en haut de la liste.

Cliquez sur Style Map (Carte de style) pour découvrir l'effet du chargement de différents ID de carte.

Vous pouvez également ajouter votre propre style ("Carte de style" > "Ajouter un ID de carte") et observer la mise à jour de votre carte avec votre carte stylisée personnalisée.

JavaScript

Voici un exemple de base de chargement d'une carte stylisée personnalisée à l'aide d'un ID de carte. Dans ce cas, le JavaScript Maps fait référence à l'ID de carte 8e0a97af9386fef lors du chargement de la carte et applique automatiquement le style actuellement associé à l'ID de carte.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
Voir un exemple

Essayer l'exemple

API Maps Static

Un ID de carte est un identifiant associé à un style de carte ou un élément géographique spécifique. Configurez un style de carte et associez-le à un ID de carte dans la console Google Cloud. Ensuite, lorsque vous référencez un ID de carte dans votre code, le style de carte qui lui est associé s'affiche dans votre application. Toutes les modifications de style apportées par la suite apparaissent automatiquement dans votre application, sans que vos clients aient besoin d'effectuer des mises à jour.

  1. Si vous utilisez la personnalisation de cartes dans Google Cloud avec une carte existante personnalisée avec le paramètre style, veillez à les supprimer afin d'éviter tout conflit éventuel avec de futures fonctionnalités.

  2. Pour ajouter un ID de carte à une carte nouvelle ou existante qui utilise l'une de nos API 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="https://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=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />
    


  1. La personnalisation de cartes dans Google Cloud n'est pas disponible en mode simplifié sur Android.