สร้างเครื่องมือค้นหาร้านค้าแบบอินเทอร์แอกทีฟด้วย Places UI Kit

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

เอกสารนี้จะอธิบายขั้นตอนสำคัญในการพัฒนาแอปพลิเคชันเครื่องมือค้นหาร้านค้าแบบอินเทอร์แอกทีฟโดยใช้ Google Maps Platform โดยเฉพาะ Maps JavaScript API และชุด UI ของสถานที่: องค์ประกอบรายละเอียดสถานที่ คุณจะได้เรียนรู้วิธีสร้างแผนที่ที่แสดงสถานที่ตั้งของร้านค้า อัปเดตรายการร้านค้าที่แสดงแบบไดนามิก และแสดงข้อมูลสถานที่อย่างละเอียดสำหรับร้านค้าแต่ละแห่ง

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

คุณควรคุ้นเคยกับสิ่งต่อไปนี้

• Maps JavaScript API - ใช้เพื่อแสดงแผนที่ในหน้าเว็บและนําเข้า UI Kit ของ Places
• เครื่องหมายขั้นสูง - ใช้เพื่อแสดงเครื่องหมายบนแผนที่
• Places UI Kit - ใช้เพื่อแสดงข้อมูลเกี่ยวกับร้านค้าใน UI

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

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

การตั้งค่าเบื้องต้น

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

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

1. การใช้ Web Component ของ HTML ที่ใช้ gmp-map
2. การใช้ JavaScript

เลือกวิธีการที่เหมาะกับกรณีการใช้งานของคุณมากที่สุด การใช้แผนที่ทั้ง 2 วิธีจะใช้คู่กับคู่มือนี้ได้

สาธิต

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

โหลดและแสดงที่ตั้งร้านค้า

ในส่วนนี้ เราจะโหลดและแสดงข้อมูลร้านค้าบนแผนที่ คู่มือนี้ถือว่าคุณมีที่เก็บข้อมูลเกี่ยวกับร้านค้าที่มีอยู่เพื่อดึงข้อมูล ข้อมูลร้านค้าอาจมาจากแหล่งที่มาต่างๆ เช่น ฐานข้อมูล ในตัวอย่างนี้ เราจะสมมติว่าไฟล์ JSON ในเครื่อง (stores.json) มีอาร์เรย์ของออบเจ็กต์ร้านค้า โดยแต่ละรายการแสดงถึงสถานที่ตั้งของร้านค้า 1 แห่ง ออบเจ็กต์แต่ละรายการควรมี name, location (ที่มี lat และ lng) และ place_id อย่างน้อย

การเรียกข้อมูลรหัสสถานที่สำหรับสถานที่ตั้งของร้านค้ามีหลายวิธีหากยังไม่มี ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับรหัสสถานที่

ตัวอย่างรายการรายละเอียดร้านค้าในไฟล์ stores.json อาจมีลักษณะดังนี้ โดยจะมีช่องสำหรับชื่อ สถานที่ตั้ง (lat/lng) และรหัสสถานที่ มีออบเจ็กต์เพื่อเก็บเวลาทําการของร้านค้า (ถูกตัด) นอกจากนี้ยังมีค่าบูลีน 2 ค่าเพื่อช่วยอธิบายลักษณะเฉพาะของสถานที่ตั้งของร้านค้า

{
  "name": "Example Store Alpha",
  "location": { "lat": 51.51, "lng": -0.12 },
  "place_id": "YOUR_STORE_PLACE_ID",
  "opening_hours": { "Monday": "09:00 - 17:00", "...": "..." },
  "new_store_design": true,
  "indoor_seating": false
}

ในโค้ด JavaScript ให้ดึงข้อมูลตำแหน่งร้านค้าและแสดงหมุดบนแผนที่สำหรับแต่ละแห่ง

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

function displayInitialMarkers(storeLocations) {
    if (!AdvancedMarkerElement || !LatLng || !mapElement) return;
    storeLocations.forEach(store => {
        if (store.location) {
            const marker = new AdvancedMarkerElement({
                position: new LatLng(store.location.lat, store.location.lng),
                title: store.name
            });
            mapElement.appendChild(marker);
        }
    });
}

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

ตัวอย่างลักษณะที่เครื่องมือระบุตำแหน่งร้านค้าอาจปรากฏในระยะนี้คือ

ฟังการเปลี่ยนแปลงวิวพอร์ตแผนที่

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

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

map.addListener('idle', debounce(updateMarkersInView, 300));

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

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        const context = this;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

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

ฟังก์ชัน updateMarkersInView ควรดำเนินการต่อไปนี้

ล้างเครื่องหมายที่มีอยู่ทั้งหมดออกจากแผนที่

ตรวจสอบว่าตำแหน่งของร้านค้าอยู่ภายในขอบเขตแผนที่ปัจจุบันหรือไม่ ตัวอย่างเช่น

if (map.getBounds().contains(storeLatLng)) {
  // logic
}

ภายในคำสั่ง if ด้านบน ให้เขียนโค้ดเพื่อแสดงเครื่องหมายและรายละเอียดร้านค้าในแถบด้านข้าง หากตำแหน่งร้านค้าอยู่ภายในวิวพอร์ตของแผนที่

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

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

สถานที่ตั้งของร้านค้าแต่ละแห่งในแหล่งข้อมูลต้องมีรหัสสถานที่ที่สอดคล้องกัน รหัสนี้จะระบุสถานที่ตั้งใน Google Maps โดยไม่ซ้ำกัน และเป็นสิ่งจําเป็นสําหรับการดึงข้อมูลรายละเอียด โดยปกติแล้ว คุณจะต้องขอรหัสสถานที่เหล่านี้ล่วงหน้าและจัดเก็บรหัสเหล่านี้กับระเบียนร้านค้าแต่ละรายการ

ผสานรวมองค์ประกอบรายละเอียดสถานที่แบบกะทัดรัดในแอปพลิเคชัน

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

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

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

ฟังก์ชันต่อไปนี้จะถือว่ามีการนําเข้าไลบรารี Place UI Kit ที่จําเป็นและพร้อมใช้งานในขอบเขตที่มีการเรียกใช้ฟังก์ชันนี้ และstoreData ที่ส่งไปยังฟังก์ชันมี place_id

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

function createPlaceDetailsCompactElement(storeData) {
    // Create the main details component
    const detailsCompact = new PlaceDetailsCompactElement();
    detailsCompact.setAttribute('orientation', 'vertical'); // Or 'horizontal'

    // Specify the Place ID
    const placeRequest = new PlaceDetailsPlaceRequestElement();
    placeRequest.place = storeData.place_id;
    detailsCompact.appendChild(placeRequest);

    // Configure which content elements to display
    const contentConfig = new PlaceContentConfigElement();
    // For this example, we'll render media, rating, accessibility, and attribution:
    contentConfig.appendChild(new PlaceMediaElement({ lightboxPreferred: true }));
    contentConfig.appendChild(new PlaceRatingElement());
    contentConfig.appendChild(new PlaceAccessibleEntranceIconElement());
    // Configure attribution
    const placeAttribution = new PlaceAttributionElement();
    placeAttribution.setAttribute('light-scheme-color', 'gray');
    placeAttribution.setAttribute('dark-scheme-color', 'gray');
    contentConfig.appendChild(placeAttribution);
    detailsCompact.appendChild(contentConfig);
    // Return the element
    return detailsCompact;
}

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

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

ตัวอย่างลักษณะที่ใบสมัครของคุณอาจมีในขั้นตอนนี้

ปรับปรุงเครื่องมือค้นหาร้านค้า

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

เพิ่มการเติมข้อความอัตโนมัติ

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

ตรวจหาตำแหน่ง

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

แสดงระยะทางและเส้นทาง

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

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

บทสรุป

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

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

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

Henrik Valve | DevX วิศวกร