Lecteur de quartier résidentiel

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

Dans cet exemple, nous ajoutons une barre de recherche Place Autocomplete pour que les utilisateurs puissent saisir une adresse et évaluer les services à proximité. Pour les utilisateurs résidentiels, nous définissons les placeTypePreferences sur des types couramment associés à la vie personnelle. Les adresses de cet exemple sont limitées aux États-Unis.

Comprendre le code

Régler la fréquence des types de lieux

Lorsque vous spécifiez des types de lieux que la bibliothèque de contexte local doit renvoyer, vous pouvez attribuer une pondération relative à chaque propriété à l'aide de l'attribut weight (les types dont la pondération relative est plus élevée apparaîtront plus souvent). Cet exemple spécifie une fréquence plus élevée pour les parcs et les écoles, s'ils sont disponibles.

TypeScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

JavaScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

Place Autocomplete

Pour utiliser le service Place Autocomplete, vous devez d'abord charger la bibliothèque Places, API Maps JavaScript. La documentation Autocomplete détaille tous les paramètres disponibles pour personnaliser le comportement de Place Autocomplete, comme le filtrage des prédictions par zone géographique ou type de lieu.

  1. Activez l'API Places pour votre projet.
  2. Chargez la bibliothèque Places et l'API JavaScript en plus de la bibliothèque de contexte local.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext,places&v=beta&callback=initMap">
</script>

  1. Suivez la documentation Autocomplete et consultez les exemples de code pour savoir comment ajouter une barre de recherche Place Autocomplete à votre site Web ou à votre carte. Voici les lignes pertinentes dans cet exemple :

TypeScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input")! as HTMLInputElement;
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

JavaScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input");
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

Essayer l'exemple