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

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

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

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

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

התוצאות מוחזרות כרשימה של 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>

    <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

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