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',
});
}