หน้านี้ได้รับการแปลโดย Cloud Translation API

สำรวจสถานที่ด้วยองค์ประกอบการค้นหาสถานที่และ Maps JavaScript API

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

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

Place Search Element คืออะไร

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตั้งค่าองค์ประกอบการค้นหาสถานที่

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

องค์ประกอบการค้นหาสถานที่ใช้แนวทางแบบประกาศ แทนที่จะกำหนดค่าทั้งหมดใน 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'];

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

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

องค์ประกอบการค้นหาสถานที่ช่วยให้มีตัวเลือกการค้นหา 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 สร้างเครื่องมือฟัง 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 ไม่บังคับจะจำกัดจำนวนผลลัพธ์ที่แสดง

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

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

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

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

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

let markers = {};

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

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

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

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

// 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);
    }
}

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

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

เพิ่ม 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();
    }
});

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

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

บทสรุป

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

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

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

Henrik Valve | DevX Engineer