רכיב חיפוש מקומות מתקדם (תצוגה מקדימה)

‫ AdvancedPlaceSearchElement הוא רכיב HTML שמציג את תוצאות החיפוש של מקום ברשימה. יש שתי דרכים להגדיר את הרכיב gmp-advanced-place-search:

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

חיפוש בקשה באזור

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

החיפוש בסביבה הקרובה מוגדר בעיקר לחיפוש לפי סוג מקום ומיקום, ואפשר לדרג את התוצאות לפי מרחק או לפי פופולריות באמצעות המאפיין rankPreference. פרטים נוספים מופיעים במסמכי העזרה של מחלקת PlaceNearbySearchRequestElement.

בדוגמה הזו, רכיב החיפוש המתקדם של מקומות מוצג בתגובה לחיפוש של מקומות קרובים עם סוג מקום שנבחר על ידי המשתמש. מוצג גם AdvancedPlaceDetailsCompactElement של המקום שנבחר.

כדי להוסיף את הרכיב Advanced Place Search (חיפוש מקומות מתקדם) למפה, מוסיפים רכיב gmp-advanced-place-search עם רכיב gmp-place-nearby-search-request מוטמע לדף ה-HTML. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

רכיב select מאפשר למשתמש לבחור סוג מקום מהתפריט. לצורך פשטות, מפורטים רק שלושה סוגי מקומות: מסעדה, בית קפה ותחנת טעינה לרכב חשמלי. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

כשהמשתמש בוחר סוג מקום מהתפריט, הרכיב gmp-place-nearby-search-request מתעדכן והרכיב Advanced Place Search מציג את התוצאות.

בקשה לחיפוש לפי טקסט

מזינים מונח חיפוש בשדה להזנת קלט ולוחצים על הלחצן חיפוש כדי לקבל רשימה של מקומות שתואמים למונח.

החיפוש הטקסטואלי מוגדר בעיקר לחיפוש באמצעות שאילתת טקסט ומיקום, ואפשר לצמצם את התוצאות לפי רמת מחיר, דירוג והאם המקום פתוח כרגע. אפשר גם לדרג את התוצאות לפי מרחק או לפי פופולריות באמצעות המאפיין rankPreference. פרטים נוספים מופיעים במסמכי העזרה של מחלקת PlaceTextSearchRequestElement.

בדוגמה הזו, רכיב החיפוש המתקדם של מקומות מוצג בתגובה לקלט טקסט של משתמש. מוצג גם AdvancedPlaceDetailsCompactElement של המקום שנבחר.

כדי להוסיף את הרכיב Advanced Place Search (חיפוש מקומות מתקדם) למפה, מוסיפים רכיב gmp-advanced-place-search עם רכיב gmp-place-text-search-request מוטמע לדף ה-HTML. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

האלמנט input מאפשר למשתמש להזין טקסט לחיפוש. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

כשמשתמש לוחץ על הלחצן חיפוש, פונקציית החיפוש מופעלת, רכיב gmp-place-text-search-request מתעדכן ורכיב החיפוש המתקדם של מקומות מציג את התוצאות.

תכונות מתקדמות

התאמה אישית של לחצני פעולה

מוסיפים לחצני פעולה כרכיבי צאצא בתוך רכיב <template slot="place-list-item"> של חיפוש מקומות מתקדם. משתמשים ב-<gmp-place-link> לחיבורי ניווט רגילים, ומציינים במפורש את המאפיין action. אפשר גם לציין את המאפיין slot. הפעולות המוגדרות מראש שניתן להשתמש בהן הן open-website,‏ open-directions,‏ open-map ו-call. אם משמיטים את מאפיין slot, ברירת המחדל היא action-main. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-search>

סינון ביקורות ותוכן מדיה

בדוגמת הקוד הזו מוצגים רק מדיה וביקורות שמוזכר בהם המונח 'קפה'.

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

הגדרת שיוך למקום

כדי להגדיר שיוך חזותי, מוסיפים רכיב <gmp-place-attribution> כדי להציג הגדרות שיוך נתונים כלליות של Maps API, כמו המקור של תמונה או ביקורת. צריך להוסיף אותו כרכיב צאצא ישיר של <template>. המערכת תתעלם ממאפייני שיוך שמוצבים בתוך רכיב <template>. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-search>

טיפול בבחירת מקום ובשגיאות

אם המאפיין selectable קיים, אפשר להגדיר את המערכת לזיהוי של האירוע gmp-select כדי לאחזר את המקום שהמשתמש בחר. אפשר גם להאזין לאירוע gmp-error כדי לטפל בצורה תקינה בתרחישים שבהם לא ניתן לאחזר נתונים של מקומות. 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});