התכונה 'חיפוש טקסט (חדש)' מקבלת שאילתת טקסט ומחזירה רשימה של מקומות תואמים.
'חיפוש טקסט (חדש)' מחזיר מידע על קבוצת מקומות לפי מחרוזת. לדוגמה, 'פיצה בתל אביב' או 'חנויות נעליים ליד אוטווה' או 'הרחוב הראשי 123'. השירות משיב עם רשימה של מקומות שתואמים למחרוזת הטקסט וכל הטיית מיקום שהוגדרה. חיפוש טקסט (חדש) מאפשר לחפש מקומות לפי סוג, לסנן לפי קריטריונים כמו שעות פעילות ודירוג ולהגביל או להטות את התוצאות למיקום ספציפי.
כדי להשתמש ב-Text Search (New), צריך להפעיל את Places API (New) בפרויקט ב-Google Cloud. לפרטים נוספים, אפשר לעיין במאמר בנושא תחילת העבודה.
חיפוש מקומות לפי שאילתת טקסט
אפשר להתקשר אל searchByText
כדי להחזיר רשימה של מקומות משאילתת טקסט או ממספר טלפון.
צריך לציין את הפרמטרים של החיפוש באמצעות בקשה, ואז להפעיל את הפונקציה searchByText
. התוצאות מוחזרות כרשימה של Place
אובייקטים, שממנה אפשר לקבל פרטי מקום. קטע הקוד הבא מציג דוגמה לבקשה וקריאה ל-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);
- אפשר לציין שאילתת טקסט או מספר טלפון לחיפוש באמצעות הפרמטר
textQuery
. - משתמשים בפרמטר
fields
(חובה) כדי לציין רשימה מופרדת בפסיקים של שדה נתונים אחד או יותר באותיות קאמל. - כדי להחזיר רק תוצאות מהסוג שצוין, צריך להשתמש בפרמטר
includedType
. - צריך להשתמש ב-
locationBias
או ב-locationRestriction
כדי להטות או להגביל את תוצאות חיפוש הטקסט לאזור ספציפי.
אם השאילתה מכילה מספר טלפון, צריך להגדיר את הפרמטר האזורי. לדוגמה, אם
נעשה שימוש במספר טלפון כדי לחפש מקום ביפן, והדומיין שממנו נשלחה הבקשה הוא jp
,
צריך להגדיר את הפרמטר region
כ-'jp'. אם משמיטים את region
מהבקשה, ברירת המחדל של ה-API היא אזור ארצות הברית (us).
Place
אובייקטים, שמהם תוכלו לקבל
פרטי מקום.
דוגמה
הדוגמה הבאה משתמשת ב-searchByText
כדי לשלוח שאילתה על מסעדות טאקו
באזור מאונטיין ויו, ומאכלסת מפה עם סמנים להצגת התוצאות.
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>