Définir les options du contexte local et de la carte

Cette section décrit les options que vous pouvez définir sur une instance LocalContextMapView et la Map interne contenue dans LocalContextMapView. Lorsque vous créez une instance LocalContextMapView, vous spécifiez jusqu'à 10 types de lieux, ainsi qu'un nombre maximal de lieux à renvoyer (jusqu'à 24). La Map interne accepte les mêmes MapOptions qu'une Map d'API Maps JavaScript standard.

Vous pouvez mettre à jour les propriétés de recherche de contexte local à tout moment après l'initialisation de la bibliothèque de contexte local. La mise à jour de maxPlaceCount, placeTypePreferences, locationRestriction ou locationBias peut déclencher automatiquement une nouvelle recherche.

Spécifier des types de lieux

Vous pouvez spécifier jusqu'à 10 types de lieux que la bibliothèque de contexte locale doit renvoyer. Spécifiez des types de lieux à l'aide de la propriété placeTypePreferences et transmettez un ou plusieurs types de lieux, comme illustré dans l'exemple suivant :

placeTypePreferences: ['restaurant', 'cafe']

Pondération du type de lieux

Vous pouvez facultativement attribuer une pondération relative à chaque type spécifié. Les types ayant une valeur de pondération plus élevée apparaîtront alors plus souvent. La pondération est un paramètre avancé facultatif qui ne doit être utilisé que si nécessaire. Lorsque ce paramètre est omis, la bibliothèque de contexte local détermine les pondérations par défaut, qui peuvent changer et s'ajuster au fil du temps.

Vous pouvez attribuer une pondération relative à chaque propriété à l'aide de l'attribut weight. L'exemple suivant montre comment pondérer des types de lieux spécifiés pour renvoyer deux fois plus de restaurant et de cafe que de primary_school :

placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]

Les résultats varient selon que le type de lieu existe ou non dans une zone donnée. Par exemple, attribuer une pondération de 10 à shopping_mall n'aura aucun effet si aucun centre commercial n'existe dans la zone.

Définir le nombre maximal de lieux

Pour définir le nombre maximal de lieux (jusqu'à 24) que la bibliothèque de contexte local doit renvoyer, utilisez la propriété maxPlaceCount, comme indiqué ci-dessous :

maxPlaceCount: 12

Définir une restriction en fonction de l'emplacement

Les résultats de recherche sont liés par défaut à la fenêtre d'affichage de la carte. Vous pouvez spécifier un ensemble de limites pour restreindre les résultats de recherche à une zone plus grande ou plus petite. Pour ce faire, définissez la propriété locationRestriction de LocalContextMapView sur la LatLngBounds souhaitée. Cette valeur peut être supérieure ou inférieure à celle de la fenêtre d'affichage de la carte. Voir un exemple

Activer l'itinéraire

Pour activer l'itinéraire sur votre carte, définissez la propriété directionsOptions de LocalContextMapView en transmettant un littéral d'objet LatLng pour le point de départ (le point d'arrivée correspond au lieu actuellement sélectionné). Si aucun point de départ n'est indiqué, l'itinéraire est désactivé. L'exemple suivant montre comment définir un point de départ pour activer l'itinéraire à pied sur une carte :

directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},

La taille de la fenêtre d'affichage de la carte telle que définie par les limites de la carte et le niveau de zoom influence directement les distances pouvant être renvoyées à partir d'un point de départ donné. Par exemple, si la fenêtre d'affichage est configurée pour afficher une zone de 100 km de large, les points d'intérêt situés dans un rayon de 50 km autour du point de départ peuvent s'afficher. Pour vous assurer que votre application renvoie des itinéraires à pied avec des distances raisonnables, vous pouvez :

  • désactiver l'itinéraire à pied en deçà d'un certain niveau de zoom (généralement 16) ;
  • définir une locationRestriction en utilisant une zone limitée plus petite. Ainsi, les points d'intérêt n'apparaîtront pas en dehors de la zone de restriction.

Modifier le point de départ de l'itinéraire

Vous pouvez modifier la valeur de la propriété directionsOptions à tout moment pendant le cycle de vie de LocalContextMapView. L'exemple suivant montre comment définir une nouvelle valeur pour directionsOptions :

localContextMapView.directionsOptions = {
  origin: {lat: 47.6532809, lng: -122.3512206},
};

ou

localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};

Définir la mise en page et la visibilité

Vous pouvez définir les options initiales de position et de visibilité des détails du lieu et du sélecteur de lieu en définissant les propriétés placeChooserViewSetup et placeDetailsViewSetup de LocalContextMapView. Vous pouvez également masquer les détails du lieu programmatiquement.

Définir la position du sélecteur de lieu

Vous pouvez définir la position du sélecteur de lieu lorsque vous initialisez LocalContextMapView. La position dépend de la direction du document et du sens de lecture de votre application (de gauche à droite, LTR, ou de droite à gauche, RTL).

Le sélecteur de lieu propose trois options de mise en page :

  • INLINE_START affiche le sélecteur de lieu au début du flux de contenu (à gauche de la carte pour LTR, à droite pour RTL).
  • INLINE_END affiche le sélecteur de lieu à la fin du flux de contenu (à droite de la carte pour LTR, à gauche pour RTL).
  • BLOCK_END affiche le sélecteur de lieu en bas de la page (identique pour LTR et RTL).

Lorsque vous définissez la position du sélecteur de lieux sur INLINE_START ou INLINE_END, vous devez toujours définir la même valeur pour la vue des détails sur le lieu. Vous pouvez facultativement afficher les détails du lieu dans une fenêtre d'informations. Pour BLOCK_END, la vue détaillée doit toujours être définie sur le mode INFO_WINDOW.

La bibliothèque de contexte local modifie la position du sélecteur de lieu de manière responsive en fonction de la taille d'affichage de LocalContextMapView. Par défaut, dans un LocalContextMapView plus grand, le sélectionneur de lieux s'affiche au début du flux de contenu (à gauche de la carte pour LTR, à droite pour RTL). Dans un LocalContextMapView plus petit (par exemple, sur un appareil mobile), l'option par défaut affiche le sélecteur de lieu en bas de la carte et les détails du lieu dans une fenêtre d'informations. Le niveau de zoom du navigateur affecte les dimensions en pixels où le sélecteur de lieu bascule entre les positions sur le côté et en bas (le seuil augmente proportionnellement au niveau de zoom).

Nous vous recommandons d'utiliser des appels de fonctions pour configurer la position par défaut du sélecteur de lieu. Les valeurs déclarées directement remplacent toutes les modifications de mise en page responsives.

Afficher le sélecteur de lieu au début du flux de contenu

Pour que le sélecteur de lieu s'affiche au début du flux de contenu (à gauche de la carte pour LTR, à droite pour RTL), définissez la position sur INLINE_START pour placeChooserViewSetup et pour placeDetailsViewSetup, comme illustré dans l'exemple suivant :

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
});

Afficher le sélecteur de lieu à la fin du flux de contenu

Pour que le sélecteur de lieux s'affiche à la fin du flux de contenu (à droite pour LTR, à gauche pour RTL), définissez la position sur INLINE_END pour placeChooserViewSetup et placeDetailsViewSetup, comme dans l'exemple suivant :

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
});

Afficher le sélecteur de lieu en bas

Pour afficher le sélecteur de lieu en bas de la carte, définissez la position de placeChooserViewSetup sur BLOCK_END et le layoutMode de placeDetailsViewSetup sur INFO_WINDOW, comme illustré dans l'exemple suivant :

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'BLOCK_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {layoutMode: 'INFO_WINDOW'};
    }
  },
});

Masquer le sélecteur de lieu

Le sélecteur de lieu est visible par défaut. Pour masquer le sélecteur de lieu, définissez layoutMode sur HIDDEN, comme illustré dans l'exemple suivant :

placeChooserViewSetup: {layoutMode: 'HIDDEN'},

L'exemple suivant montre comment masquer le sélecteur de lieu lorsque la position par défaut passe à BLOCK_END :

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  placeChooserViewSetup: ({defaultPosition}) => {
    if (defaultPosition === 'BLOCK_END') {
      return {layoutMode: 'HIDDEN'};
    }
  },
});

Afficher les détails du lieu dans une fenêtre d'informations

Pour que les détails du lieu s'affichent dans une fenêtre d'informations, définissez layoutMode sur INFO_WINDOW, comme illustré dans l'exemple suivant :

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

Vous pouvez utiliser ce paramètre quelle que soit la position du sélecteur de lieu (à gauche, à droite ou en bas).

Masquer les détails du lieu programmatiquement

Vous pouvez masquer les détails du lieu programmatiquement en appelant hidePlaceDetailsView() sur une instance de LocalContextMapView, comme illustré dans l'exemple suivant :

localContextMapView.hidePlaceDetailsView()

Par défaut, si vous cliquez sur la carte, les détails du lieu sont masqués. Vous pouvez définir l'option hidesOnMapClick dans placeDetailsViewSetup sur false pour éviter ce comportement par défaut.

// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: {hidesOnMapClick: false},
});

Pour ne masquer la fenêtre d'informations sur le lieu que lorsque l'utilisateur clique sur la carte, vous pouvez contrôler la valeur hidesOnMapClick au moyen d'une condition, comme illustré dans l'exemple suivant :

// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
  },
});

Définir les options Map internes

Une fois que vous disposez d'une instance LocalContextMapView, vous pouvez définir MapOptions sur l'instance Map interne. La Map contenue dans LocalContextMapView est compatible avec les mêmes options de carte qu'une carte API Maps JavaScript standard. L'exemple suivant montre comment créer une instance LocalContextMapView et définir quelques options sur la Map interne :

// Instantiate LocalContextMapView.
function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
  });

  // Set inner map options.
  localContextMapView.map.setOptions({
    center: pos,
    zoom: 14,
    mapTypeId: 'satellite',
  });
}