Personnaliser la carte contextuelle locale

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Dans cet exemple, nous appliquons un style de carte personnalisé à la carte de base. Cette carte montre Waikiki à Hawaï et présente un jeu de couleurs tropicales. Nous avons également défini maxPlaceCount sur 18 pour afficher plus de POI.

Comprendre le code

Accéder à la carte de base

La carte de base est accessible en tant que propriété map d'un objet google.maps.localContext.LocalContextMapView. Cette carte est un objet google.maps.Map standard qui peut être personnalisé avec l'ensemble des paramètres et méthodes disponibles pour cette classe. Par exemple, vous pouvez ajouter des repères personnalisés et des écouteurs d'événements.

var marker = new google.maps.Marker({position: center, map:  localContextMapView.map});
localContextMapView.map.addListener('click', () => {
    localContextMapView.hidePlaceDetailsView();
  });

Appliquer des styles personnalisés

Étant donné que les styles par défaut de google.maps.localContext.LocalContextMapView.map sont différents de ceux d'une Map standard, vous pouvez choisir d'ignorer les valeurs par défaut ou de fusionner votre style personnalisé avec les valeurs par défaut de la bibliothèque de contexte local. Pour en savoir plus, consultez Appliquer un style à la carte.

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

TypeScript

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

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

JavaScript

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

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

Ajouter un repère personnalisé

Cet exemple utilise une icône d'hôtel pour distinguer le point central du repère rouge par défaut. Découvrez comment personnaliser un repère en modifiant les propriétés label et icon d'un Marker.

Par défaut, ces repères apparaissent sous les repères de POI de la bibliothèque de contexte local. Pour vous assurer que les repères de la bibliothèque de contexte local ne masquent pas le repère personnalisé, définissez la propriété zIndex du repère sur une valeur plus élevée que maxPlaceCount.

TypeScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

JavaScript

// Add a marker at the center point
new google.maps.Marker({
  position: center,
  map: map,
  icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
  zIndex: 30,
});

Essayer l'exemple