การค้นพบสถานที่ด้วย PlaceSearchElement

วัตถุประสงค์

ดูวิธีผสานรวม PlaceSearchElement กับ Google Maps เพื่อช่วยให้ผู้ใช้ค้นหาสถานที่โดยใช้การค้นหาใกล้เคียงหรือการค้นหาด้วยข้อความ ซึ่งจะช่วยเพิ่มความสามารถในการสำรวจจุดที่น่าสนใจ ใช้คอมแพ็กต์องค์ประกอบรายละเอียดสถานที่เพื่อระบุ รายละเอียดเพิ่มเติมเกี่ยวกับสถานที่ที่ปรากฏในแอปพลิเคชัน

PlaceSearchElement คืออะไร

PlaceSearchElement เป็นส่วนหนึ่งของ Places UI Kit ใน Maps JavaScript API เป็นองค์ประกอบ HTML ที่แสดงผลการค้นหาสถานที่ในรูปแบบรายการภายในแอปพลิเคชันโดยตรง องค์ประกอบนี้ช่วยลดความซับซ้อนของกระบวนการแสดงสถานที่ที่พบโดยใช้การค้นหาในบริเวณใกล้เคียงหรือการค้นหาข้อความ เพื่อมอบประสบการณ์ของผู้ใช้ที่ราบรื่นในการค้นหาสถานที่ เมื่อผู้ใช้เลือกสถานที่จากรายการ คุณจะแสดงรายละเอียดของสถานที่นั้นบนแผนที่ได้ โดยมักจะใช้หน้าต่างข้อมูลและองค์ประกอบรายละเอียดสถานที่

แสดงภาพการค้นพบสถานที่

รูปภาพต่อไปนี้แสดงตัวอย่างการทำงานของ PlaceSearchElement ทางด้านซ้ายจะแสดงรายการร้านอาหาร (PlaceSearchElement) เมื่อเลือกร้านอาหาร รายละเอียดของร้านจะปรากฏในหน้าต่างข้อมูลบนแผนที่ และแผนที่จะอยู่ตรงกลางตำแหน่งของร้าน

กรณีการใช้งานสำหรับการค้นพบสถานที่

การผสานรวม PlaceSearchElement จะช่วยเพิ่มประสิทธิภาพแอปพลิเคชันต่างๆ ในอุตสาหกรรมต่างๆ ได้ดังนี้

• การท่องเที่ยว: อนุญาตให้นักท่องเที่ยวค้นหาสถานที่ท่องเที่ยว โรงแรม หรือ อาหารประเภทใดประเภทหนึ่งในพื้นที่
• อสังหาริมทรัพย์: ช่วยให้ผู้มีโอกาสเป็นผู้ซื้อหรือผู้เช่าค้นหาโรงเรียน ซูเปอร์มาร์เก็ต หรือตัวเลือกการขนส่งสาธารณะที่อยู่ใกล้เคียง
• โลจิสติกส์และบริการ: ช่วยคนขับค้นหาสถานีชาร์จ EV ปั๊มน้ำมัน หรือศูนย์บริการเฉพาะ

เวิร์กโฟลว์โซลูชัน: การติดตั้งใช้งานการค้นพบสถานที่

ส่วนนี้จะอธิบายวิธีการผสานรวม PlaceSearchElement เพื่อ ค้นหาสถานที่บนแผนที่ รวมถึงมีตัวอย่างโค้ดสำหรับการโต้ตอบกับ Places UI Kit ดูวิธีเริ่มต้นใช้งานแผนที่และใช้ทั้งการค้นหาในบริเวณใกล้เคียงและการค้นหาข้อความ สุดท้าย ให้ใช้คอมโพเนนต์รายละเอียดสถานที่เพื่อแสดงรายละเอียดเพิ่มเติมเกี่ยวกับสถานที่เมื่อผู้ใช้คลิกหมุดของสถานที่นั้นบนแผนที่

ข้อกำหนดเบื้องต้น

เราขอแนะนำให้คุณทำความคุ้นเคยกับเอกสารต่อไปนี้

• PlaceSearchElement - ใช้เพื่อแสดงสถานที่โดยใช้การค้นหาในบริเวณใกล้เคียงหรือการค้นหาข้อความ
• องค์ประกอบรายละเอียดสถานที่ - ใช้เพื่อแสดงรายละเอียดของสถานที่แต่ละแห่ง
• Maps JavaScript API - ใช้เพื่อแสดงแผนที่ ในหน้าเว็บ และเพื่อนำเข้า Places UI Kit

เปิดใช้ Maps JavaScript API และ Places UI Kit ในโปรเจ็กต์

ตรวจสอบว่าคุณได้โหลด Maps JavaScript API และนำเข้า ไลบรารีที่จำเป็น ก่อนเริ่มต้นใช้งาน เอกสารนี้ยังถือว่าคุณมีความรู้ด้านการพัฒนาเว็บ ซึ่งรวมถึง HTML, CSS และ JavaScript

เพิ่มแผนที่ลงในหน้า

ขั้นตอนแรกคือการเพิ่มแผนที่ลงในหน้าเว็บ แผนที่นี้จะใช้เพื่อแสดงผลลัพธ์ของ PlaceSearchElement เป็นหมุดที่เลือกได้

คุณเพิ่มแผนที่ลงในหน้าเว็บได้ 2 วิธี ดังนี้

1. การใช้ gmp-map HTML Web Component
2. การใช้ JavaScript

ข้อมูลโค้ดในหน้านี้สร้างขึ้นโดยใช้แผนที่ JavaScript

แผนที่อาจมีศูนย์กลางอยู่ที่ตำแหน่งที่คุณต้องการให้ผู้ใช้ค้นหา โดยรอบ เช่น โรงแรม หรือเริ่มต้นด้วยการขอตำแหน่งปัจจุบันของผู้ใช้ เพื่อจัดกึ่งกลางแผนที่ เพื่อวัตถุประสงค์ของเอกสารนี้ เราจะใช้ตำแหน่งคงที่เพื่อยึดการค้นหา

หากคุณกำลังแสดงภาพสถานที่ใกล้กับตำแหน่งที่แน่นอน เช่น โรงแรม ให้วางเครื่องหมายบนแผนที่เพื่อ แสดงสถานที่นี้ เช่น

แผนที่อยู่ตรงกลางซานฟรานซิสโก โดยมีหมุดสีน้ำเงินแสดงสถานที่ที่เรา กำลังค้นหาในบริเวณใกล้เคียง มีการปรับแต่งสีหมุดโดยใช้ PinElement เราได้ซ่อนตัวควบคุมประเภทแผนที่ จาก UI แล้ว

ตั้งค่า PlaceSearchElement

ตอนนี้ให้ตั้งค่า HTML และ CSS เพื่อแสดง PlaceSearchElement ตัวอย่างนี้ ลอยองค์ประกอบไว้เหนือด้านซ้ายของแผนที่ แต่คุณลองใช้ เลย์เอาต์ต่างๆ ให้เหมาะกับแอปพลิเคชันได้

PlaceSearchElement ใช้แนวทางแบบประกาศ แทนที่จะกำหนดค่าทั้งหมดใน JavaScript คุณจะกำหนดประเภทการค้นหาใน HTML ได้โดยตรงด้วยการซ้อนองค์ประกอบคำขอ เช่น <gmp-place-nearby-search-request> ไว้ภายในคอมโพเนนต์ <gmp-place-search> หลัก

เริ่มต้นองค์ประกอบ <gmp-place-search> ภายในโค้ด HTML ใช้แอตทริบิวต์ selectable เพื่อเปิดใช้เหตุการณ์คลิกในผลลัพธ์ ภายใน ให้เพิ่ม <gmp-place-nearby-search-request> เพื่อระบุว่าระบบจะใช้องค์ประกอบนี้ สำหรับการค้นหาใกล้เคียง

<gmp-place-search selectable>
  <gmp-place-nearby-search-request>
  </gmp-place-nearby-search-request>
</gmp-place-search>

ในการค้นหาครั้งแรกและแสดงผลลัพธ์ เราจะใช้ JavaScript เพื่อรับ การอ้างอิงไปยังองค์ประกอบคำขอที่ซ้อนกันและตั้งค่าพร็อพเพอร์ตี้ขององค์ประกอบ เริ่มต้น วงกลมเพื่อใช้เป็นlocationRestriction โดยใช้ตำแหน่งเครื่องหมายจาก ขั้นตอนก่อนหน้าเป็นจุดศูนย์กลาง จากนั้นตั้งค่าพร็อพเพอร์ตี้ locationRestriction และ includedPrimaryTypes ในองค์ประกอบคำขอเพื่อทริกเกอร์การค้นหา

ข้อมูลโค้ดสำหรับกรณีนี้มีดังนี้

// Get references to the Place Search and its nested request element
const placeSearchElement = document.querySelector("gmp-place-search");
const placeSearchRequestElement = document.querySelector("gmp-place-nearby-search-request");

// Define the location restriction for the search
const circleRestriction = new Circle({
    center: marker.position,
    radius: 500
});

// Set the properties on the request element to perform an initial search for restaurants.
placeSearchRequestElement.locationRestriction = circleRestriction;
placeSearchRequestElement.includedPrimaryTypes = ['restaurant'];

ตัวอย่างลักษณะของแอปพลิเคชันในขั้นตอนนี้มีดังนี้

อนุญาตให้ผู้ใช้ค้นหา

PlaceSearchElement ช่วยให้มีตัวเลือกการค้นหา 2 แบบ ได้แก่

• <gmp-place-nearby-search-request> - แสดงผลการค้นหาจากการค้นหาในบริเวณใกล้เคียงโดยใช้ประเภทสถานที่
• <gmp-place-text-search-request> - แสดงผลการค้นหาจากการค้นหาข้อความของสถานที่โดยใช้ข้อความอิสระ เช่น "ซูชิในซานฟรานซิสโก"

ซึ่งเป็นองค์ประกอบที่ซ้อนกันภายใน <gmp-place-search> จากนั้นคุณจะทริกเกอร์การค้นหาได้ โดยการตั้งค่าพร็อพเพอร์ตี้ในองค์ประกอบคำขอที่ซ้อนกันนั้นโดยใช้ JavaScript

ส่วนนี้จะอธิบายการใช้ทั้ง 2 วิธี

การค้นหาในบริเวณใกล้เคียง

หากต้องการอนุญาตให้ผู้ใช้ทำการค้นหาใกล้เคียง คุณต้องมีองค์ประกอบ UI ให้ผู้ใช้เลือกประเภทสถานที่ก่อน เลือกวิธีการเลือกที่เหมาะกับแอปพลิเคชันของคุณมากที่สุด เช่น รายการแบบเลื่อนลงที่ป้อนข้อมูลด้วยประเภทสถานที่ที่เลือก

เราขอแนะนำให้เลือกชุดย่อยของประเภทที่เกี่ยวข้องกับกรณีการใช้งานของคุณ เช่น หากคุณกำลังพัฒนาแอปพลิเคชันเพื่อแสดงสถานที่ใกล้เคียงโรงแรมแก่นักท่องเที่ยว คุณอาจเลือก bakery, coffee_shop, museum, restaurant และ tourist_attraction

HTML ควรมีองค์ประกอบ <gmp-place-search> ที่มี <gmp-place-nearby-search-request> ซ้อนอยู่ภายใน

<gmp-place-search selectable>
  <gmp-place-nearby-search-request>
  </gmp-place-nearby-search-request>
</gmp-place-search>

จากนั้นสร้างเครื่องมือฟัง JavaScript สำหรับเหตุการณ์ change ในตัวเลือกประเภทสถานที่ Listener นี้จะเรียกใช้ฟังก์ชันที่อัปเดตพร็อพเพอร์ตี้ขององค์ประกอบ <gmp-place-nearby-search-request> ซึ่งจะทริกเกอร์การค้นหาใหม่และอัปเดตรายการโดยอัตโนมัติ

// Get a reference to the nested request element
const placeSearchRequestElement = document.querySelector('gmp-place-nearby-search-request');

// Function to update the place search based on the selected type
function updatePlaceList() {
    const selectedType = placeTypeSelect.value;
    if (!selectedType) {
        // If no type is selected, don't perform a search.
        // You could optionally hide the list or clear previous results here.
        placeSearchElement.style.display = 'none';
        return;
    }
    placeSearchElement.style.display = 'block';

    // Set properties on the request element to trigger a new search
    placeSearchRequestElement.locationRestriction = searchCircle;
    placeSearchRequestElement.maxResultCount = 8;
    placeSearchRequestElement.includedPrimaryTypes = [selectedType];
}

ระบบจะใช้ searchCircle เดียวกันจากขั้นตอนการตั้งค่าสำหรับ locationRestriction ระบบจะตั้งค่าพร็อพเพอร์ตี้ includedPrimaryTypes เป็นค่า จากการเลือกของผู้ใช้ นอกจากนี้ ยังมีการตั้งค่า maxResultCount (ไม่บังคับ) เพื่อจำกัด จำนวนผลลัพธ์ด้วย

การค้นหาข้อความ

หากต้องการเปิดใช้การค้นหาข้อความ คุณต้องเปลี่ยนการกำหนดค่า HTML คุณจะฝังองค์ประกอบ <gmp-place-text-search-request> แทนคำขอค้นหาที่อยู่ใกล้เคียง

<gmp-place-search selectable>
  <gmp-place-text-search-request>
  </gmp-place-text-search-request>
</gmp-place-search>

เพิ่มช่องป้อนข้อความและปุ่มค้นหาลงใน UI สร้าง Listener ของ JavaScript สำหรับเหตุการณ์ click ของปุ่ม ตัวแฮนเดิลเหตุการณ์จะรับอินพุตของผู้ใช้และ อัปเดตพร็อพเพอร์ตี้ขององค์ประกอบ <gmp-place-text-search-request> เพื่อ ทำการค้นหา

// Get a reference to the text search request element
const placeTextSearchRequestElement = document.querySelector('gmp-place-text-search-request');
const textSearchInput = document.getElementById('textSearchInput');
const textSearchButton = document.getElementById('textSearchButton');

textSearchButton.addEventListener('click', performTextSearch);

function performTextSearch() {
    const query = textSearchInput.value.trim();
    if (!query) {
        console.log("Search query is empty.");
        return;
    }
    // Set properties on the request element to trigger a new search
    placeTextSearchRequestElement.textQuery = query;
    placeTextSearchRequestElement.locationBias = map.getBounds();
    placeTextSearchRequestElement.maxResultCount = 8;
}

ในที่นี้ เราจะตั้งค่าพร็อพเพอร์ตี้ textQuery ด้วยข้อมูลที่ผู้ใช้ป้อน นอกจากนี้ เรายังมีlocationBiasโดยใช้ขอบเขตของแผนที่ปัจจุบัน ซึ่งจะบอกให้ API แสดงผลลัพธ์ภายในพื้นที่นั้นโดยไม่จำกัดอย่างเคร่งครัด maxResultCount จะจำกัดจำนวนผลลัพธ์ที่แสดง

แสดงหมุดและรายละเอียดของสถานที่

ตอนนี้แอปพลิเคชันสามารถค้นหาสถานที่และป้อนข้อมูลในองค์ประกอบได้แล้ว ใน ขั้นตอนถัดไป เราจะปรับปรุงฟังก์ชันการทำงานโดยทำดังนี้

• แสดงหมุดบนแผนที่สำหรับสถานที่แต่ละแห่งที่สร้างขึ้นใน PlaceSearchElement
• อนุญาตให้ผู้ใช้คลิกหมุดหรือสถานที่ภายใน PlaceSearchElementเพื่อแสดงรายละเอียดเพิ่มเติมเกี่ยวกับสถานที่นั้นๆ

หลักการของขั้นตอนนี้จะเหมือนกันไม่ว่าแอปพลิเคชันจะใช้การค้นหาใกล้เคียงหรือการค้นหาด้วยข้อความ

ก่อนอื่น ให้เพิ่มตัวแปรส่วนกลางลงในโค้ด JavaScript เพื่อจัดเก็บเครื่องหมายสถานที่ ซึ่งจะช่วยให้คุณนำออกได้เมื่อการค้นหาเปลี่ยนแปลงไป และจัดการเหตุการณ์คลิก ได้

let markers = {};

สร้างฟังก์ชันเพื่อเพิ่มเครื่องหมายลงในแผนที่ ระบบจะเรียกใช้ฟังก์ชันนี้ เมื่อใดก็ตามที่มีการโหลดผลการค้นหาใหม่ โดยจะดำเนินการต่อไปนี้

• นำเครื่องหมายสถานที่ที่มีอยู่ออกจากแผนที่
• วนซ้ำผลลัพธ์จาก PlaceSearchElement และเพิ่มเครื่องหมายสำหรับ แต่ละรายการ
• ปรับขอบเขตของแผนที่เพื่อให้เครื่องหมายใหม่ทั้งหมดปรากฏ

หากต้องการรอกิจกรรมเมื่อมีผลการค้นหา ให้เพิ่มgmp-loadListener เหตุการณ์ ลงในองค์ประกอบ <gmp-place-search> เหตุการณ์นี้จะทริกเกอร์หลังจากค้นหาเสร็จสมบูรณ์ และแสดงผลลัพธ์

เราจะเพิ่ม Listener ไว้ในฟังก์ชันการค้นหา (เช่น updatePlaceList) และ ใช้ตัวเลือก { once: true } เพื่อให้มั่นใจว่า Listener จะทริกเกอร์เฉพาะผลลัพธ์ของ การค้นหาปัจจุบันเท่านั้น

// In your search function, after setting the request properties:
placeSearchElement.addEventListener('gmp-load', addMarkers, { once: true });

ฟังก์ชัน addMarkers มีลักษณะดังนี้

async function addMarkers() {
    const { LatLngBounds } = await google.maps.importLibrary("core");
    const bounds = new LatLngBounds();

    if (placeSearchElement.places.length > 0) {
        // Remove existing markers
        for (const m in markers) {
            markers[m].map = null;
        }
        markers = {};

        // Loop through each place from the search results
        // and add a marker for each one.
        for (const place of placeSearchElement.places) {
            const marker = new google.maps.marker.AdvancedMarkerElement({
                map: map,
                position: place.location,
            });

            markers[place.id] = marker;
            bounds.extend(place.location);
            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;

            // Add a click listener for each marker.
            marker.addListener('gmp-click', (event) => {
                // The main logic for showing details will go here.
            });
        }
        // Position the map to display all markers.
        map.setCenter(bounds.getCenter());
        map.fitBounds(bounds);
    }
}

เมื่อทำขั้นตอนนี้เสร็จแล้ว แอปพลิเคชันจะมีลักษณะดังต่อไปนี้ โดยจะ แสดงเครื่องหมายสำหรับสถานที่แต่ละแห่งที่ PlaceSearchElement แสดงผลได้

ตอนนี้เรามีเครื่องหมายบนแผนที่แล้ว ขั้นตอนสุดท้ายคือการจัดการเหตุการณ์การคลิกเครื่องหมายและองค์ประกอบเพื่อแสดงหน้าต่างข้อมูลที่มีรายละเอียดสถานที่ ซึ่งองค์ประกอบรายละเอียดสถานที่เป็นผู้ให้ข้อมูล สำหรับตัวอย่างนี้ เราจะใช้องค์ประกอบรายละเอียดสถานที่แบบย่อ

เพิ่ม HTML ขององค์ประกอบแบบย่อของรายละเอียดสถานที่ลงในโค้ด เช่น

<gmp-place-details-compact orientation="vertical" style="display: none;">
    <gmp-place-all-content></gmp-place-all-content>
    <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-details-compact>

style ตั้งค่าเป็น display: none และจะมองไม่เห็นจนกว่าจะจำเป็น gmp-place-all-content จะส่งผ่านเพื่อแสดงเนื้อหาขององค์ประกอบทั้งหมด หากต้องการเลือกเนื้อหาที่จะแสดง โปรดดูเอกสารประกอบองค์ประกอบรายละเอียดสถานที่แบบย่อ

สร้างตัวแปรส่วนกลางใน JavaScript เพื่อเก็บการอ้างอิงไปยังองค์ประกอบรายละเอียดสถานที่ แบบย่อ แล้วป้อนข้อมูลนี้ในโค้ดการเริ่มต้น เช่น

let placeDetailsElement;
...
placeDetailsElement = document.querySelector('gmp-place-details-compact');

ภายในฟังก์ชัน addMarkers ให้เพิ่มเครื่องมือฟังเหตุการณ์ gmp-click ลงในเครื่องหมายแต่ละรายการ และกำหนดค่าองค์ประกอบแบบย่อของรายละเอียดสถานที่เพื่อแสดงรายละเอียดสถานที่ โดยส่งรหัสสถานที่ของเครื่องหมายปัจจุบัน

เมื่อทำเสร็จแล้ว ระบบจะเปิดหน้าต่างข้อมูล เพื่อแสดงองค์ประกอบขนาดกะทัดรัดของรายละเอียดสถานที่ ซึ่งยึดตามตัวทำเครื่องหมาย

สุดท้าย ระบบจะวางแผนที่ไว้ที่วิวพอร์ตของสถานที่ที่เลือกเพื่อให้ มองเห็นได้

async function addMarkers() {
          ...
            marker.addListener('gmp-click', (event) => {
                //Set up Place Details Compact Widget
                placeDetailsElement.style.display = "block";
                // Remove any existing place request element
                const existingPlaceRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
                if (existingPlaceRequest) {
                    existingPlaceRequest.remove();
                }
                // Create and configure the new place request element
                const placeRequestElement = new google.maps.places.PlaceDetailsPlaceRequestElement({ place: place.id });
                // Prepend the new place request element to the main widget
                placeDetailsElement.prepend(placeRequestElement);
                if (infoWindow.isOpen) {
                    infoWindow.close();
                }
                infoWindow.setOptions({
                    content: placeDetailsElement
                });
                infoWindow.open({
                    anchor: marker,
                    map: map
                });
                // Position the map to show the selected place
                placeDetailsElement.addEventListener('gmp-load', () => {
                    map.fitBounds(place.viewport, { top: 500, left: 400 });
                });
            });
          ...
        });
    }
}

หากต้องการให้ผู้ใช้คลิกสถานที่ในองค์ประกอบรายการสถานที่เพื่อแสดงองค์ประกอบรายละเอียดสถานที่แบบย่อ ให้เพิ่มข้อมูลต่อไปนี้ลงในโค้ด JavaScript หลังการเรียกใช้ configureFromSearchNearbyRequest

placeSearchElement.addEventListener("gmp-select", ({ place }) => {
    if (markers[place.id]) {
        markers[place.id].click();
    }
});

หลังจากขั้นตอนนี้เสร็จสมบูรณ์แล้ว แอปพลิเคชันจะใช้การค้นหาในบริเวณใกล้เคียงหรือการค้นหาข้อความเพื่อแสดงผลองค์ประกอบรายการสถานที่ได้ ผลลัพธ์ของ คำสั่งนี้จะแสดงหมุดบนแผนที่ และการคลิกหมุดหรือสถานที่ในรายการสถานที่ จะแสดงหน้าต่างข้อมูลที่มีรายละเอียดสถานที่ ซึ่งมาจากองค์ประกอบรายละเอียดสถานที่แบบย่อ

แอปพลิเคชันจะมีลักษณะดังนี้

บทสรุป

PlaceSearchElementเมื่อรวมกับองค์ประกอบย่อของรายละเอียดสถานที่ จะช่วยให้คุณเพิ่มฟีเจอร์การค้นพบสถานที่ที่สมบูรณ์ลงในแอปพลิเคชัน Google Maps Platform ได้อย่างมีประสิทธิภาพ

ลองใช้ Places UI Kit วันนี้ เพื่อช่วยให้ผู้ใช้ค้นหาและสำรวจสถานที่ต่างๆ ได้โดยใช้ทั้งการค้นหาใกล้เคียงและการค้นหาด้วยข้อความ รวมถึงแสดงรายละเอียดสถานที่ที่สมบูรณ์ ซึ่งจะช่วยเพิ่มการโต้ตอบของผู้ใช้กับ Use Case การค้นพบสถานที่ของคุณ

ผู้ร่วมให้ข้อมูล

Henrik Valve | DevX Engineer