La ricerca di testo (nuova) accetta una query di testo e restituisce un elenco di luoghi corrispondenti.
La ricerca di testo (nuova) restituisce informazioni su un insieme di luoghi in base a una stringa, ad esempio "pizza a New York" o "negozi di scarpe vicino a Ottawa" o "123 Main Street". Il servizio risponde con un elenco di luoghi corrispondenti alla stringa di testo e a eventuali bias di geolocalizzazione impostati. La ricerca di testo (novità) ti consente di cercare luoghi per tipo, filtrare i risultati in base a criteri come orario di apertura e valutazione e limitare o orientare i risultati a una località specifica.
Per utilizzare la ricerca di testo (nuova), devi attivare "API Places (nuova)" nel tuo progetto Google Cloud. Per maggiori dettagli, consulta la guida introduttiva.
Trovare luoghi tramite query di testo
Chiama searchByText
per visualizzare un elenco di luoghi da una query di testo o da un numero di telefono.
Specifica i parametri di ricerca utilizzando una richiesta, quindi chiama searchByText()
. I risultati vengono
restituiti come elenco di oggetti Place
, da cui puoi ottenere
dettagli sui luoghi. Lo snippet riportato di seguito mostra un esempio di richiesta e chiamata a searchByText
:
TypeScript
const request = { textQuery: 'Tacos in Mountain View', fields: ['displayName', 'location', 'businessStatus'], includedType: 'restaurant', locationBias: { lat: 37.4161493, lng: -122.0812166 }, isOpenNow: true, language: 'en-US', maxResultCount: 8, minRating: 3.2, region: 'us', useStrictTypeFiltering: false, }; //@ts-ignore const { places } = await Place.searchByText(request);
JavaScript
const request = { textQuery: "Tacos in Mountain View", fields: ["displayName", "location", "businessStatus"], includedType: "restaurant", locationBias: { lat: 37.4161493, lng: -122.0812166 }, isOpenNow: true, language: "en-US", maxResultCount: 8, minRating: 3.2, region: "us", useStrictTypeFiltering: false, }; //@ts-ignore const { places } = await Place.searchByText(request);
- Specifica una query di testo o un numero di telefono da cercare con il parametro
textQuery
. - Utilizza il parametro
fields
(obbligatorio) per specificare un elenco separato da virgole di uno o più campi di dati in lettere maiuscole. - Utilizza il parametro
includedType
per restituire solo i risultati del tipo specificato. - Utilizza
locationBias
olocationRestriction
per orientare o limitare i risultati di ricerca di testo a una regione specifica.
Se la query contiene un numero di telefono, il parametro regione deve essere impostato. Ad esempio, se
utilizzi un numero di telefono per cercare un luogo in Giappone e il dominio richiedente è jp
,
devi impostare il parametro region
su "jp". Se region
viene omesso dalla richiesta, l'API utilizzerà per impostazione predefinita la regione degli Stati Uniti ("us").
Place
, da cui puoi ottenere
dettagli sui luoghi.
Esempio
L'esempio seguente utilizza searchByText
per eseguire una query sui ristoranti di taco nelle vicinanze di Mountain View e compila una mappa con indicatori per mostrare i risultati.
TypeScript
let map; let center; async function initMap() { const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; center = { lat: 37.4161493, lng: -122.0812166 }; map = new Map(document.getElementById('map') as HTMLElement, { center: center, zoom: 11, mapId: 'DEMO_MAP_ID', }); findPlaces(); } async function findPlaces() { const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; const request = { textQuery: 'Tacos in Mountain View', fields: ['displayName', 'location', 'businessStatus'], includedType: 'restaurant', locationBias: { lat: 37.4161493, lng: -122.0812166 }, isOpenNow: true, language: 'en-US', maxResultCount: 8, minRating: 3.2, region: 'us', useStrictTypeFiltering: false, }; //@ts-ignore const { places } = await Place.searchByText(request); if (places.length) { console.log(places); const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary; const bounds = new LatLngBounds(); // Loop through and get all the results. places.forEach((place) => { const markerView = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); bounds.extend(place.location as google.maps.LatLng); console.log(place); }); map.fitBounds(bounds); } else { console.log('No results'); } } initMap();
JavaScript
let map; let center; async function initMap() { const { Map } = await google.maps.importLibrary("maps"); center = { lat: 37.4161493, lng: -122.0812166 }; map = new Map(document.getElementById("map"), { center: center, zoom: 11, mapId: "DEMO_MAP_ID", }); findPlaces(); } async function findPlaces() { const { Place } = await google.maps.importLibrary("places"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); const request = { textQuery: "Tacos in Mountain View", fields: ["displayName", "location", "businessStatus"], includedType: "restaurant", locationBias: { lat: 37.4161493, lng: -122.0812166 }, isOpenNow: true, language: "en-US", maxResultCount: 8, minRating: 3.2, region: "us", useStrictTypeFiltering: false, }; //@ts-ignore const { places } = await Place.searchByText(request); if (places.length) { console.log(places); const { LatLngBounds } = await google.maps.importLibrary("core"); const bounds = new LatLngBounds(); // Loop through and get all the results. places.forEach((place) => { const markerView = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); bounds.extend(place.location); console.log(place); }); map.fitBounds(bounds); } else { console.log("No results"); } } initMap();
CSS
/* * 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; }
HTML
<html> <head> <title>Text Search</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>