Classe Place (preview)

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.

Charger 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.

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');
    }
}
index.ts

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");
  }
}
index.js

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.

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');
    }
}
index.ts

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;
index.js

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).

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);
}
index.ts

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);
}
index.js

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

Champs de données de contact

Champs de données d'atmosphère