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

חיפוש טקסט (חדש) – המערכת מקבלת שאילתת טקסט ומציגה רשימה של מקומות תואמים.

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

כדי להשתמש בחיפוש טקסט (חדש), צריך להפעיל את Places API (חדש) בפרויקט שלכם ב-Google Cloud. פרטים נוספים זמינים במאמר תחילת העבודה.

חיפוש מקומות לפי שאילתת טקסט

אפשר להתקשר למספר searchByText כדי לקבל רשימה של מקומות לפי שאילתה בטקסט או מספר טלפון. מציינים את פרמטרים החיפוש באמצעות בקשה, ולאחר מכן קוראים ל-searchByText(). התוצאות מוחזרות כרשימה של אובייקטים מסוג Place, שממנה אפשר לקבל פרטי מקום. קטע הקוד הבא מציג דוגמה לבקשה ולקריאה ל-searchByText:

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

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 (חובה) כדי לציין רשימה מופרדת בפסיקים של שדות נתונים אחד או יותר, באותיות רישיות גדולות וקטנות (camel case).
• משתמשים בפרמטר includedType כדי להציג רק תוצאות מהסוג שצוין.
• משתמשים ב-locationBias או ב-locationRestriction כדי להטות או להגביל את תוצאות החיפוש של הטקסט לאזור ספציפי.

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

דוגמה

בדוגמה הבאה נעשה שימוש ב-searchByText כדי לבצע שאילתה על מסעדות טאקו בסביבת Mountain View, ולאכלס מפה בסמנים כדי להציג את התוצאות.

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

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

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