Colocar objeto
O objeto Place, que contém informações sobre um lugar, é retornado dinamicamente
pela Text Search, pela Nearby Search e pelo Place Autocomplete. Também é possível criar um objeto Place
com um ID de lugar ou um nome de recurso (o nome de recurso é o ID de lugar com o prefixo
places/). O snippet a seguir mostra como criar um objeto Place usando um
ID de lugar:
// Use a place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo });
Também é possível criar um objeto Place com um nome de recurso de lugar:
// Use a place resource name to create a new Place instance. const place = new Place({ resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo });
Para mais informações, consulte PlaceOptions.
Buscar campos
Se você tiver um objeto Place, um ID de lugar ou um nome de recurso, use o
Place.fetchFields() método para receber detalhes sobre esse lugar. Forneça uma lista separada por vírgulas de campos de dados de lugar a serem retornados. Especifique os nomes dos campos com letras concatenadas. Use o objeto Place retornado para receber dados
dos campos solicitados.
O exemplo a seguir usa um ID de lugar para criar um novo Place, chama Place.fetchFields()
solicitando os campos displayName e formattedAddress e adiciona um
marcador ao mapa.
TypeScript
async function getPlaceDetails() { const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary('places'), google.maps.importLibrary('marker'), ]); // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'googleMapsURI', ], }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map: innerMap, position: place.location, title: place.displayName, }); // Assemble the info window content. const content = document.createElement('div'); const address = document.createElement('div'); const placeId = document.createElement('div'); address.textContent = place.formattedAddress || ''; placeId.textContent = place.id; content.append(placeId, address); if (place.googleMapsURI) { const link = document.createElement('a'); link.href = place.googleMapsURI; link.target = '_blank'; link.textContent = 'View Details on Google Maps'; content.appendChild(link); } // Display an info window. infoWindow.setHeaderContent(place.displayName); infoWindow.setContent(content); infoWindow.open({ anchor: marker, }); }
JavaScript
async function getPlaceDetails() { const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary('places'), google.maps.importLibrary('marker'), ]); // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'googleMapsURI', ], }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map: innerMap, position: place.location, title: place.displayName, }); // Assemble the info window content. const content = document.createElement('div'); const address = document.createElement('div'); const placeId = document.createElement('div'); address.textContent = place.formattedAddress || ''; placeId.textContent = place.id; content.append(placeId, address); if (place.googleMapsURI) { const link = document.createElement('a'); link.href = place.googleMapsURI; link.target = '_blank'; link.textContent = 'View Details on Google Maps'; content.appendChild(link); } // Display an info window. infoWindow.setHeaderContent(place.displayName); infoWindow.setContent(content); infoWindow.open({ anchor: marker, }); }
Map e Place foram declarados antes dessa função:
const { Map } = await google.maps.importLibrary("maps"); const { Place } = await google.maps.importLibrary("places");