Présentation
La classe Place propose une API plus simple pour utiliser la bibliothèque Places et l'API Maps JavaScript. Elle est compatible avec les modèles d'utilisation modernes, comme les promesses.
Commencer
Obtenir une clé API et activer les API requises
Avant d'utiliser le preview de la classe Place, vous devez disposer d'un projet Cloud avec un compte de facturation. Vous devez aussi activer les API Maps JavaScript et Places. Pour ce faire, suivez ces instructions expliquant comment activer un ou plusieurs SDK ou API. Notez que les deux API doivent être activées pour le même projet dans la console Cloud.
Obtenir une clé APICharger la bibliothèque Places
Pour utiliser les fonctionnalités proposées dans la bibliothèque Places, vous devez d'abord la charger à l'aide du paramètre libraries
dans l'URL de chargement de script de l'API Maps JavaScript. Pour ce preview, vous devez également spécifier v=beta
.
<script async src="https://maps.googleapis.com/maps/api/js?v=beta&key=YOUR_API_KEY&libraries=places&callback=initMap"> </script>
Trouver un lieu par requête textuelle
Appelez findPlaceFromQuery
pour trouver un lieu par requête textuelle. Utilisez le paramètre fields
pour spécifier une liste d'un ou plusieurs champs de données de lieu séparés par une virgule en Camel Case ("casse de chameau"). Utilisez fields: ['*']
pour afficher toutes les données d'un lieu (non recommandé dans un environnement de production, mais seulement pour des tests).
L'exemple suivant montre comment utiliser un modèle async/await pour appeler findPlaceFromQuery
et afficher les résultats sur une carte.
TypeScript
let map: google.maps.Map; let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: centerCoordinates, zoom: 14, // ... }); findPlace(); } async function findPlace() { const request = { query: 'Sports Page', fields: ['displayName', 'location'], locationBias: centerCoordinates, }; const { places } = await google.maps.places.Place.findPlaceFromQuery(request); if (places.length) { const place = places[0]; const location = place.location as google.maps.LatLng; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); map.setCenter(location); } else { console.log('No results'); } }
JavaScript
let map; let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: centerCoordinates, zoom: 14, // ... }); findPlace(); } async function findPlace() { const request = { query: "Sports Page", fields: ["displayName", "location"], locationBias: centerCoordinates, }; const { places } = await google.maps.places.Place.findPlaceFromQuery(request); if (places.length) { const place = places[0]; const location = place.location; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); map.setCenter(location); } else { console.log("No results"); } }
Trouver un lieu par numéro de téléphone
Appelez findPlaceFromPhoneNumber
pour trouver un lieu par numéro de téléphone. Les numéros de téléphone doivent être au format international, c'est-à-dire précédés du signe plus ("+"), suivi du code pays, puis du numéro de téléphone. Pour en savoir plus, consultez la Recommandation UIT-T E.164. Utilisez le paramètre fields
pour spécifier une liste d'un ou plusieurs champs de données de lieu séparés par une virgule en Camel Case ("casse de chameau"). Utilisez fields: ['*']
pour afficher toutes les données d'un lieu (non recommandé dans un environnement de production, mais seulement pour des tests).
L'exemple suivant montre comment utiliser un modèle async/await pour appeler findPlaceFromPhoneNumber
et afficher les résultats sur une carte.
TypeScript
async function findPlaceByPhone() { const request = { phoneNumber: '+1(206)787-5388', fields: ['displayName', 'location'], } const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(request); if (places.length) { const place = places[0]; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); console.log(place.displayName); } else { console.log('No results'); } }
JavaScript
async function findPlaceByPhone() { const request = { phoneNumber: "+1(206)787-5388", fields: ["displayName", "location"], }; const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber( request ); if (places.length) { const place = places[0]; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); console.log(place.displayName); } else { console.log("No results"); } } window.initMap = initMap;
Obtenir des informations sur un lieu
Si vous disposez déjà d'un objet Place
ou de l'ID d'un lieu, vous pouvez appeler Place.fetchFields
pour obtenir plus d'informations sur ce lieu. Utilisez le paramètre fields
pour spécifier une liste d'un ou plusieurs champs de données de lieu séparés par une virgule en Camel Case ("casse de chameau"). Utilisez fields: ['*']
pour afficher tous les champs de données (non recommandé dans un environnement de production, seulement pour des tests).
TypeScript
async function getPlaceDetails() { // Use place ID to create a new Place instance. const place = new google.maps.places.Place({ id: 'ChIJN1t_tDeuEmsRUsoyG83frY4', requestedLanguage: 'en', // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ['displayName', 'formattedAddress'] }); // Show the result console.log(place.displayName); console.log(place.formattedAddress); }
JavaScript
async function getPlaceDetails() { // Use place ID to create a new Place instance. const place = new google.maps.places.Place({ id: "ChIJN1t_tDeuEmsRUsoyG83frY4", requestedLanguage: "en", // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ["displayName", "formattedAddress"] }); // Show the result console.log(place.displayName); console.log(place.formattedAddress); }
Champs de données d'un lieu
Ces champs correspondent aux résultats Place Details et sont divisés en trois catégories de facturation : Basic, Contact et Atmosphere. Les champs Basic sont facturés au tarif de base et n'entraînent aucuns frais supplémentaires. Les champs Contact et Atmosphere sont facturés à un tarif plus élevé.
Pour en savoir plus, consultez la grille tarifaire. Les attributions (html_attributions
) sont toujours renvoyées avec chaque appel, qu'elles aient été demandées ou non.
La classe Place prend en charge les champs suivants :
Données de base
Champ | Classe Place (version bêta uniquement) |
---|---|
Composant de l'adresse | addressComponents |
Statut de l'entreprise | businessStatus |
Adresse formatée | adrFormatAddress |
Lieu | location |
Icône | icon |
URI de base de masque de l'icône | svgIconMaskUri |
Couleur d'arrière-plan de l'icône | iconBackgroundColor |
Nom | displayName |
Photo | photos |
ID de lieu | id |
Plus Code | plusCode |
Type | types |
URL | websiteURI |
Décalage par rapport à l'UTC | utcOffsetMinutes |
Fenêtre d'affichage | viewport |
Entrée accessible en fauteuil roulant | hasWheelchairAccessibleEntrance |
Champs de données de contact
Champ | Classe Place (version bêta uniquement) |
---|---|
Numéro de téléphone | nationalPhoneNumber |
Numéro de téléphone international | internationalPhoneNumber |
Horaires d'ouverture | openingHours |
Site Web | websiteURI |
Champs de données d'atmosphère
Champ | Classe Place (version bêta uniquement) |
---|---|
Drive disponible | hasCurbsidePickup |
Livraison | hasDelivery |
Repas sur place | hasDineIn |
Niveau de prix | priceLevel |
Notes | rating |
Réservation possible | isReservable |
Avis | reviews |
Sert de la bière | servesBeer |
Sert le petit-déjeuner | servesBreakfast |
Sert des brunchs | servesBrunch |
Sert à dîner | servesDinner |
Sert à déjeuner | servesLunch |
Sert des plats végétariens | servesVegetarianFood |
Sert du vin | servesWine |
Vente à emporter | hasTakeout |
Total des notes des visiteurs | userRatingsCount |