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 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, 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
.
- Sur Android, modifiez le paramètre
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.
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;
Essayer l'exemple
-
La personnalisation de cartes dans Google Cloud n'est pas disponible en mode simplifié sur Android. ↩