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.
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
input {
height: 30px;
margin: 12px 0px;
padding: 10px;
width: 300px;
}
<html>
<head>
<title>Local Context Home</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<input id="input" placeholder="Enter a US address" />
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext,places&v=beta"
defer
></script>
</body>
</html>
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.
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.
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);
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.