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

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

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

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

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

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

ตรวจสอบว่าคุณได้โหลด Maps JavaScript API และนำเข้าไลบรารีที่จำเป็นสำหรับ Advanced Markers และ 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 อาจมีลักษณะดังนี้ โดยจะมีช่องสำหรับชื่อ สถานที่ (ละติจูด/ลองจิจูด) และรหัสสถานที่ มีออบเจ็กต์ สำหรับเก็บเวลาทำการของร้านค้า (ตัดทอน) นอกจากนี้ ยังมีค่าบูลีน 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 เพื่อแสดงรายละเอียด เกี่ยวกับร้านค้าแต่ละแห่ง

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

รูปภาพ

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

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

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

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

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

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

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

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

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

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

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

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

แสดงรายละเอียดสถานที่ที่สมบูรณ์โดยใช้คอมโพเนนต์รายละเอียดสถานที่

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

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

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

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

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

สร้างอินสแตนซ์ของ PlaceDetailsCompactElement แบบไดนามิกใน JavaScript นอกจากนี้ ยังมีการสร้าง 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 ดูเอกสารอ้างอิงสำหรับ PlaceDetailsCompactElement เพื่อดูพร็อพเพอร์ตี้ CSS ที่รองรับ

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

รูปภาพ

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

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

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

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

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

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

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

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

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

บทสรุป

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

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

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

Henrik Valve | DevX Engineer