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.
• Migrez à partir des anciens styles
  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. Utiliser 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

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