Personnalisation de cartes dans Google Cloud

Google Maps Platform propose des styles de cartes basés dans le cloud qui vous permettent d'appliquer des styles, de personnaliser et de gérer facilement vos cartes en utilisant la console Google Cloud. Vous pouvez ainsi créer une expérience de carte 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'affichent pas les éléments géographiques naturels améliorés de Google Maps. Pour que ces éléments soient compatibles avec votre carte, vous devez créer un style de carte.

Les styles de cartes basés dans le cloud vous permettent de créer et de modifier des styles de cartes 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 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.

Les styles de cartes basés dans le cloud sont disponibles 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 les styles de cartes basés dans le cloud, vous devez charger votre carte à l'aide d'un ID de carte.
• Mettez à jour à partir de styles codés en dur Avant d'ajouter un ID de carte afin d'utiliser les styles de cartes basés dans le 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 des styles de cartes basés dans le cloud nécessite un ID de carte. Avec le SDK Maps pour Android, le SDK Maps pour iOS et JavaScript, l'utilisation d'un ID de carte entraîne des frais qui sont facturés avec le SKU Dynamic Maps. Pour l'API Maps Static, ces frais sont facturés avec le SKU Static Maps.

Exemples

Android

Exécuter l'application exemple ApiDemos

Pour exécuter l'application exemple 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'application exemple ApiDemos, consultez l'exemple d'application Google Maps GitHub et affichez le projet CloudBasedMapStylingViewController (exemple GitHub pour Swift | Goal-C).

Démonstration facultative de Cloud Styling CocoaPod ou GitHub

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

Créer une 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 sur la console Cloud et obtenir une clé API. Lors de la configuration de la clé dans la console Cloud, vous pouvez spécifier l'identifiant du bundle de votre application pour vous assurer que seule votre application 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 Unlock (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 vous montre comment appliquer un style à la carte en utilisant un style défini dans la console Google Cloud.

Lorsque l'application de démonstration est lancée, cliquez sur la démo "Personnalisation de la carte" dans la section "Exemples bêta" en haut de la liste.

Cliquez sur Style Map (Carte des styles) pour voir l'effet du chargement de différents ID de carte.

Vous pouvez également essayer d'ajouter votre propre style ("Carte des styles" > "Ajouter un ID de carte"), puis voir la carte se mettre à jour 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 pour éviter tout conflit potentiel avec les 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" />