Places UI Kit คืออะไร และคุณจะใช้เพื่อสร้างโซลูชันที่น่าสนใจได้อย่างไร

บทนำ

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

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

คอมโพเนนต์

Places UI Kit มีชุดคอมโพเนนต์ UI แต่ละรายการที่ใช้ แยกกันหรือใช้ร่วมกันเพื่อสร้างประสบการณ์การใช้งาน Places ที่ราบรื่นได้

  • รายละเอียดสถานที่: คอมโพเนนต์นี้แสดงข้อมูลโดยละเอียด เกี่ยวกับสถานที่ เช่น ชื่อ ที่อยู่ หมายเลขโทรศัพท์ เว็บไซต์ เวลาทำการ และรีวิวของผู้ใช้

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

  • การเติมข้อความอัตโนมัติของสถานที่พื้นฐาน: คอมโพเนนต์นี้จะสร้างช่องป้อนข้อความ โดยแสดงรายการแบบเลื่อนลงของสถานที่ที่คาดการณ์ไว้ซึ่งตรงกับข้อมูลที่ป้อน

คอมโพเนนต์ Places UI Kit

ประโยชน์หลักของ Places UI Kit

  • ใช้งานง่าย: ผสานรวมประสบการณ์ของผู้ใช้ที่เชื่อถือได้ของ Google สำหรับ Places เข้ากับแอปของคุณด้วยโค้ดเพียงเล็กน้อย

  • ใช้ในแผนที่ใดก็ได้: คุณสามารถใช้เนื้อหาสถานที่ในแผนที่ที่ไม่ใช่ของ Google ได้เป็นครั้งแรก

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

  • การปรับแต่ง: ชุดเครื่องมือ UI ของ Places มีตัวเลือกการปรับแต่งภาพมากมายโดยไม่มีค่าใช้จ่ายเพิ่มเติม คุณสามารถใช้การตั้งค่าต่างๆ และ พร็อพเพอร์ตี้ CSS ที่กำหนดเองเพื่อกำหนดค่าองค์ประกอบการแสดงผล

  • คุ้มค่า: ชุดเครื่องมือ UI ของ Places อาจเป็นโซลูชันที่ คุ้มค่ากว่าเมื่อเทียบกับการใช้ Places API โดยตรง

กรณีการใช้งานในชีวิตจริง

คุณสามารถใช้ UI Kit ของสถานที่ในแอปพลิเคชันต่างๆ เพื่อปรับปรุงประสบการณ์ของผู้ใช้ได้

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

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

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

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

การปรับแต่ง

การปรับแต่ง Places UI Kit

คุณปรับแต่งความสมบูรณ์ของเนื้อหาและรูปแบบของคอมโพเนนต์ Places UI Kit ให้เหมาะกับความต้องการได้

การใช้พร็อพเพอร์ตี้ CSS ที่กำหนดเอง เช่น พร็อพเพอร์ตี้ CSS สำหรับคอมโพเนนต์รายละเอียดสถานที่ จะช่วยให้คุณปรับแต่ง รูปลักษณ์ของคอมโพเนนต์ให้ตรงกับการออกแบบของแอปพลิเคชันได้ คุณสามารถ ปรับแต่งสี แบบอักษร และลักษณะอื่นๆ ที่มองเห็นได้ คุณต้องปฏิบัติตาม ข้อกำหนดการระบุแหล่งที่มาเมื่อทำการแก้ไขภาพ เช่น คุณ เปลี่ยนสีหลักที่ใช้สำหรับลิงก์และจำนวนรีวิวได้ด้วย--gmp-mat-color-primaryพร็อพเพอร์ตี้ CSS

คุณสามารถควบคุมเนื้อหาของสถานที่ที่เฉพาะเจาะจงซึ่งแสดงโดยใช้องค์ประกอบ gmp-place-content-config ที่ซ้อนกันเพื่อเลือกและกำหนดค่า เนื้อหา หรือเพียงใช้ gmp-place-all-content เพื่อแสดงเนื้อหาที่มีอยู่ทั้งหมด

เครื่องมือปรับแต่งมีอยู่ในเอกสารประกอบเพื่อช่วยให้คุณเห็นภาพการกำหนดค่าสไตล์ต่างๆ

หลักเกณฑ์การใช้งาน

Places UI Kit พร้อมใช้งานผ่าน Maps JavaScript และ Places SDK สำหรับ Android และ iOS

เริ่มต้นใช้งาน

หากต้องการเริ่มใช้ Places UI Kit คุณต้องทำตามขั้นตอนต่อไปนี้

  1. ตั้งค่าโปรเจ็กต์ Google Cloud: คุณต้องมีโปรเจ็กต์ Cloud ที่มีบัญชีสำหรับการเรียกเก็บเงินเพื่อใช้ Places UI Kit

  2. เปิดใช้ Places UI Kit: คุณต้องเปิดใช้ Places UI Kit สำหรับโปรเจ็กต์

  3. รับคีย์ API: คุณต้องมีคีย์ API เพื่อตรวจสอบสิทธิ์คำขอ

ดูรายละเอียดเพิ่มเติมเกี่ยวกับแพลตฟอร์มได้ในคำแนะนำการเริ่มต้นใช้งาน Places UI Kit สำหรับ JavaScript, Android และ iOS

ตัวอย่างการใช้งาน

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

ข้อมูลโค้ดมีดังนี้ คุณดูการสาธิตและโค้ดทั้งหมดได้ในที่เก็บ GitHub นี้

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

โหลดไลบรารีที่จำเป็นใน HTML

<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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

เพิ่มคอมโพเนนต์การค้นหาสถานที่ คอมโพเนนต์การค้นหาสถานที่ตั้งมีเลย์เอาต์แนวนอนและแนวตั้ง ในตัวอย่างนี้ เราใช้เลย์เอาต์แนวนอน แอตทริบิวต์ "selectable" ช่วยให้คลิกรายการผลการค้นหาได้ (ระบบจะทริกเกอร์เหตุการณ์ gmp-select เมื่อคลิก)

เราเพิ่มองค์ประกอบย่อย 2 รายการภายในองค์ประกอบ gmp-place-search ดังนี้

  • gmp-place-all-content ใช้เพื่อแสดงเนื้อหาทั้งหมดที่พร้อมใช้งาน
  • gmp-place-text-search-request ใช้เพื่อกำหนดค่าองค์ประกอบการค้นหาสถานที่

ในตัวอย่างนี้ เราจะตั้งค่าการกำหนดค่าใน JavaScript

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

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

  • gmp-place-all-content แสดงว่ากำลังแสดงเนื้อหาทั้งหมดที่พร้อมใช้งาน
  • gmp-place-details-place-request ใช้เพื่อเลือกสถานที่

ในตัวอย่างนี้ เราจะตั้งค่าสถานที่ใน JavaScript

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

ใน JavaScript ให้นำเข้าไลบรารีที่เราต้องการสำหรับตัวอย่างนี้ ไลบรารี Places จะนำเข้าไลบรารี Places UI Kit สำหรับ JavaScript

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

สร้างแผนที่แบบไดนามิก

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

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

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

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

อย่าลืมดูเดโมและโค้ดทั้งหมดในที่เก็บ GitHub นี้

แหล่งข้อมูลที่จะช่วยคุณสร้าง

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

ผู้เขียนหลัก:

Teresa Qin | วิศวกรโซลูชัน Google Maps Platform