Personnalisation de cartes dans Google Cloud

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 points d'intérêt commerciaux : vous pouvez supprimer cinq catégories de points d'intérêt commerciaux de la carte.
• Contrôle de la densité des points d'intérêt : sur la carte de base, vous pouvez ajuster la densité des points d'intérêt 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 Android¹, 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, vous devez charger votre carte à l'aide d'un ID de carte.
• Effectuez une migration à partir des styles codés en dur
  Avant d'ajouter un ID de carte afin d'utiliser la personnalisation de cartes dans Google Cloud pour une carte existante personnalisée avec un style codé en dur, comme JSON ou des paramètres de requête d'URL, nous vous recommandons de supprimer le style codé en dur pour éviter tout risque de conflit avec les futures fonctionnalités. Vous pouvez importer votre style JSON dans un nouveau style de carte.
  • Sur Android, modifiez le paramètre MapStyleOptions.
  • Sur iOS, modifiez la classe GMSMapStyle.
  • Dans JavaScript, supprimez le style MapTypeStyle.
  • Dans Maps Static, supprimez le paramètre style.

Facturation

L'utilisation de la personnalisation de cartes dans Google Cloud nécessite un ID de carte. L'utilisation d'un ID de carte entraîne des frais liés au SKU Dynamic Maps dans le SDK Maps pour Android, le SDK Maps pour iOS et JavaScript, et des frais liés au 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émo CloudBasedMapStylingDemoActivity (Java | Kotlin).

Vous trouverez un exemple d'application Java et Kotlin qui montre comment appliquer un style à votre carte Android depuis le 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 Standling 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 depuis le cloud sur cette page.

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é dans Cloud Console, vous pouvez spécifier l'identifiant de bundle de votre application pour vous assurer que seule cette dernière peut l'utiliser. L'identifiant de bundle 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 appliquer un style à 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émo de personnalisation des cartes dans la section "Exemples bêta" en haut de la liste.

Cliquez sur Style Map pour voir l'effet de chargement de différents ID de carte.

Vous pouvez également essayer d'ajouter votre propre style ("Carte de style" > "Ajouter un ID de carte"), et voir la mise à jour de la 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.

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;
index.ts

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

window.initMap = initMap;
index.js

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 avec des fonctionnalités futures.

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