חיפוש טקסט (חדש)

התכונה 'חיפוש טקסט' (חדש) מקבלת שאילתת טקסט ומחזירה רשימה של מקומות תואמים.

Text Search (חדש) מחזיר מידע על קבוצה של מקומות על סמך מחרוזת, לדוגמה "פיצה בתל אביב" או "חנויות נעליים ליד חיפה" או "הרצל 12". השירות מגיב עם רשימה של מקומות שתואמים למחרוזת הטקסט וכל הטיה של המיקום שהוגדרה. התכונה 'חיפוש טקסט' (חדש) מאפשרת לך לחפש מקומות לפי סוג, לסנן באמצעות קריטריונים כמו שעות פעילות ודירוג, ולהגביל או להטות את התוצאות למיקום ספציפי.

כדי להשתמש בחיפוש טקסט (חדש), צריך להפעיל את Places API (חדש) בפרויקט ב-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);
index.ts

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

index.js
  • מציינים שאילתת טקסט או מספר טלפון שרוצים לחפש באמצעות הפרמטר textQuery.
  • משתמשים בפרמטר fields (חובה) כדי לציין רשימה מופרדת בפסיקים של שדה נתונים אחד או יותר באותיות גמל.
  • יש להשתמש בפרמטר includedType כדי להחזיר רק תוצאות מהסוג שצוין.
  • אפשר להשתמש בlocationBias או בlocationRestriction כדי להטות או להגביל את תוצאות חיפוש הטקסט לאזור ספציפי.
לעיון ברשימת הנכסים המלאה.

אם השאילתה מכילה מספר טלפון, יש להגדיר את פרמטר האזור. לדוגמה, אם משתמשים במספר טלפון כדי לחפש מקום ביפן, והדומיין שממנו נשלחה הבקשה הוא jp, צריך להגדיר את הפרמטר region ל-'jp'. אם השדה region יושמט מהבקשה, ברירת המחדל של ה-API היא 'אזור ארצות הברית'.

התוצאות מוחזרות כרשימה של 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();
index.ts

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

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;
}

style.css

HTML

<html>
  <head>
    <title>Text Search</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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>
index.html

רוצה לנסות את הדוגמה