Styliser la LocalContextMapView

Cette section explique comment personnaliser l'apparence visuelle de vos cartes LocalContextMapView en appliquant des styles de carte personnalisés et en personnalisant l'apparence des icônes de repère de la carte.

Appliquer des styles de carte personnalisés

Vous pouvez personnaliser l'apparence visuelle des cartes LocalContextMapView en appliquant des styles personnalisés. Notez toutefois que LocalContextMapView propose des styles par défaut différents de ceux d'une Map standard.

Pour remplacer complètement les styles par défaut LocalContextMapView par des styles personnalisés (styles contient le tableau des styles personnalisés) :

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

Pour créer un style basé sur les styles par défaut LocalContextMapView avec des styles personnalisés (styles) :

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.ts

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.js

Personnaliser les icônes des repères

Vous pouvez définir l'apparence visuelle des icônes de repères en personnalisant la couleur du repère, la couleur des glyphes et l'échelle (taille) lorsque LocalContextMapView est initialisé. Vous pouvez définir ces valeurs sur un objet statique (les styles d'icône ne changent pas avec l'état) ou une fonction dynamique (les styles d'icône changent lorsqu'une icône est mise en surbrillance ou sélectionnée).

  • Les styles personnalisés sont fusionnés avec les styles par défaut.
  • Toutes les syntaxes de couleurs CSS sont prises en charge, y compris le RVB, l'hexadécimal, le HSL et le mot clé de couleur.
  • L'échelle est une valeur numérique : 2 correspond à deux fois la taille de 1, et ainsi de suite. Par défaut, différentes valeurs d'échelle sont définies pour les différents états d'un repère. L'échelle est absolue. Par conséquent, la valeur que vous transmettez ne modifie pas la taille du repère par rapport à la valeur par défaut, mais elle la remplace. Par exemple, si vous définissez l'échelle sur 1 pour tous les États, le repère aura la même taille, quel que soit l'état.

Définir de manière statique la couleur et l'échelle de l'icône du repère

Vous pouvez définir la couleur et l'échelle par défaut des icônes et des glyphes des repères. Pour ce faire, spécifiez des valeurs de couleur pour glyphColor et background, ainsi qu'une valeur numérique pour scale dans pinOptionsSetup. L'exemple suivant définit les icônes sur noir, les glyphes sur blanc et augmente l'échelle à 2 :

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

Définir dynamiquement la couleur et l'échelle des icônes du repère

Pour définir les couleurs par défaut des icônes et des glyphes des repères en fonction de l'état (par défaut, en surbrillance ou sélectionné), choisissez les valeurs souhaitées pour chaque état avec une instruction conditionnelle. Lorsque l'utilisateur pointe sur un repère, isHighlighted devient true. Lorsque l'utilisateur clique sur un repère, isSelected devient "true". Lorsqu'il ferme les détails du lieu, les icônes des repères reviennent au style par défaut. L'exemple suivant montre comment modifier le style d'icône de repère en fonction de l'état :

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

Utiliser la personnalisation de cartes dans Google Cloud avec la bêta de Contexte local

Pour utiliser la personnalisation de cartes dans Google Cloud avec la bêta de Contexte local, procédez comme suit :

  1. Créez une Map avec un mapId et le transmettre à LocalContextMapView.
  2. Désactivez les libellés et les icônes correspondant aux points d'intérêt (POI) génériques.
  3. Désactivez quelques éléments dans les options Map internes. Ces étapes sont facultatives.

Créez une Map avec un mapId et le transmettre à LocalContextMapView.

Pour ajouter une carte à l'aide d'un ID de personnalisation de cartes dans Google Cloud, définissez l'élément map (y compris l'ID et toutes les options Map internes), puis utilisez-le pour initialiser LocalContextMapView, comme dans l'exemple suivant :

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

Désactiver les libellés et les icônes pour les POI génériques

Pour désactiver les libellés et les icônes des POI génériques, procédez comme suit :

  1. Accédez à la console Google Cloud, puis sélectionnez Styles de carte pour ouvrir l'écran "Styles de carte".
  2. Dans votre configuration de style Points d'intérêt, définissez Visibilité sur Désactivé pour les options Libellés et Icônes.
  3. Dans votre configuration de style Points d'intérêt, définissez Visibilité sur Activé pour Libellés de parc.

Définir les options Map internes (facultatif)

En plus des options Map internes que vous avez éventuellement déjà définies, vous pouvez définir d'autres options Map internes comme indiqué ici :

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});