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

בחירת פלטפורמה: Android iOS JavaScript שירות אינטרנט

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

'חיפוש טקסט (חדש)' מחזיר מידע על קבוצת מקומות לפי מחרוזת. לדוגמה, 'פיצה בתל אביב' או 'חנויות נעליים ליד אוטווה' או 'הרחוב הראשי 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);
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 היא אזור ארצות הברית (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();
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. 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

כדאי לנסות דוגמה