องค์ประกอบการเติมข้อความอัตโนมัติพื้นฐานของสถานที่

เลือกแพลตฟอร์ม: Android iOS JavaScript

BasicPlaceAutocompleteElement จะสร้างช่องป้อนข้อความ แสดงการคาดคะเนสถานที่ในรายการเลือก UI และแสดงผลรหัสสถานที่สำหรับสถานที่ที่เลือก

องค์ประกอบ Basic Place Autocomplete ใช้งานได้ง่ายกว่า PlaceAutocompleteElement และมีความแตกต่างดังนี้

  • องค์ประกอบ Basic Place Autocomplete จะแสดงผล ออบเจ็กต์ Place ที่มีเฉพาะ รหัส สถานที่ แทนที่จะเป็น PlacePrediction ออบเจ็กต์ คุณสามารถใช้รหัสสถานที่ที่แสดงผลกับองค์ประกอบ Places UI Kit Details ได้โดยตรงเพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับสถานที่ ในขณะที่ออบเจ็กต์ PlacePrediction จะต้องแปลงเป็นรหัสสถานที่ก่อน
  • องค์ประกอบ Basic Place Autocomplete ไม่กำหนดให้คุณต้องเปิดใช้ Places API ในคอนโซล Google Cloud
  • องค์ประกอบ Basic Place Autocomplete จะล้างช่องป้อนข้อมูลเมื่อผู้ใช้เลือกการคาดคะเนสถานที่

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

หากต้องการใช้องค์ประกอบ Basic Place Autocomplete คุณต้องเปิดใช้ Places UI Kit ในโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google ดูรายละเอียดได้ที่หัวข้อ เริ่มต้นใช้งาน

เพิ่มองค์ประกอบ Basic Place Autocomplete

ส่วนนี้จะแสดงวิธีเพิ่มองค์ประกอบ Basic Autocomplete ลงในหน้าเว็บหรือแผนที่

เพิ่มองค์ประกอบ Basic Autocomplete ลงในหน้าเว็บ

หากต้องการเพิ่มองค์ประกอบ BasicAutocomplete ลงในหน้าเว็บ ให้สร้าง google.maps.places.BasicPlaceAutocompleteElement ใหม่ แล้วเพิ่มลงใน หน้าเว็บตามที่แสดงในตัวอย่างต่อไปนี้ 

// Request needed libraries.
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary('places');
// Create the input HTML element and append it.
const placeAutocomplete = new BasicPlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);

เพิ่มองค์ประกอบ Basic Autocomplete ลงในแผนที่

หากต้องการเพิ่มองค์ประกอบ Basic Autocomplete ลงในแผนที่ ให้เพิ่ม BasicPlaceAutocompleteElement ลงใน gmp-map แล้วตั้งค่าตำแหน่ง โดยใช้ slot ตามที่แสดงในตัวอย่างต่อไปนี้

<gmp-map
    zoom="12"
    center="37.4220656,-122.0840897"
    map-id="DEMO_MAP_ID">
    <gmp-basic-place-autocomplete
        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
</gmp-map>

จำกัดการคาดคะเนการเติมข้อความอัตโนมัติ

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

การจำกัดผลการค้นหาจะทำให้องค์ประกอบ Basic Autocomplete ละเว้นผลการค้นหาที่อยู่นอกพื้นที่ จำกัด วิธีที่นิยมใช้คือการจำกัดผลการค้นหาให้อยู่ในขอบเขตของแผนที่ การให้น้ำหนักพิเศษกับผลการค้นหา จะทำให้องค์ประกอบ BasicAutocomplete แสดงผลการค้นหาภายในพื้นที่ที่ระบุ แต่ผลการค้นหาบางรายการอาจอยู่นอกพื้นที่นั้น

หากคุณไม่ได้ระบุขอบเขตหรือวิวพอร์ตของแผนที่ API จะพยายามตรวจหาตำแหน่งของผู้ใช้ จากที่อยู่ IP และให้น้ำหนักพิเศษกับผลการค้นหาสำหรับตำแหน่งนั้น ตั้งค่าขอบเขตทุกครั้งที่ ทำได้ มิเช่นนั้น ผู้ใช้แต่ละรายอาจได้รับการคาดคะเนที่แตกต่างกัน นอกจากนี้ การระบุวิวพอร์ตที่เหมาะสม เช่น วิวพอร์ตที่คุณตั้งค่าโดยการเลื่อนหรือ ซูมแผนที่ หรือวิวพอร์ตที่นักพัฒนาแอปตั้งค่าตามตำแหน่งและรัศมีของอุปกรณ์ ก็มีความสำคัญในการปรับปรุง การคาดคะเนโดยทั่วไป เมื่อไม่มีรัศมี ระบบจะพิจารณาว่า 5 กม. เป็นค่าเริ่มต้นที่เหมาะสมสำหรับองค์ประกอบ Basic Place Autocomplete อย่าตั้งค่าวิวพอร์ตที่มีรัศมีเป็น 0 (จุดเดียว) วิวพอร์ตที่มีขนาดเพียงไม่กี่เมตร (น้อยกว่า 100 ม.) หรือวิวพอร์ตที่ครอบคลุมทั่วโลก

จำกัดการค้นหาสถานที่ตามประเทศ

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

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

จำกัดการค้นหาสถานที่ให้อยู่ในขอบเขตของแผนที่

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

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

เมื่อจำกัดให้อยู่ในขอบเขตของแผนที่ ให้เพิ่ม Listener เพื่ออัปเดตขอบเขตเมื่อมีการเปลี่ยนแปลง 

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

หากต้องการนำ locationRestriction ออก ให้ตั้งค่าเป็น null

ให้น้ำหนักพิเศษกับผลการค้นหาสถานที่

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

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

หากต้องการนำ locationBias ออก ให้ตั้งค่าเป็น null

จำกัดผลการค้นหาสถานที่ให้แสดงเฉพาะบางประเภท

จำกัดผลการค้นหาสถานที่ให้แสดงเฉพาะสถานที่บางประเภทโดยใช้พร็อพเพอร์ตี้ includedPrimaryTypes และระบุประเภทอย่างน้อย 1 ประเภทตามที่แสดงไว้ที่นี่

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

ดูรายการประเภทที่รองรับทั้งหมดได้ใน ตารางประเภทสถานที่ A และ B

กำหนดค่าองค์ประกอบคำขอสถานที่

เพิ่ม Listener เพื่ออัปเดตองค์ประกอบคำขอสถานที่เมื่อผู้ใช้เลือกการคาดคะเน 

// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select', (event) => {
    // Reset marker and InfoWindow, and prepare the details element.
    placeDetailsParent.appendChild(placeDetailsElement);
    placeDetailsElement.style.display = 'block';
    advancedMarkerElement.position = null;
    infoWindow.close();

    // Request details for the selected place.
    const placeDetailsRequest = placeDetailsElement.querySelector(
        'gmp-place-details-place-request'
    );
    placeDetailsRequest.place = event.place.id;
});

ตัวอย่างนี้แสดงวิธีเพิ่มองค์ประกอบ Basic Autocomplete ลงใน Google Maps

JavaScript

const placeAutocompleteElement = document.querySelector(
    'gmp-basic-place-autocomplete'
);
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
const placeDetailsParent = placeDetailsElement.parentElement;
const gmpMapElement = document.querySelector('gmp-map');

async function init() {
    // Asynchronously load required libraries from the Google Maps JS API.
    const [{ AdvancedMarkerElement }, { InfoWindow, Circle }, { Size }] =
        await Promise.all([
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('core'),
            google.maps.importLibrary('places'),
        ]);

    // Get the initial center directly from the gmp-map element's property.
    const center = gmpMapElement.center;

    // Set the initial location bias for the autocomplete element.
    placeAutocompleteElement.locationBias = center;

    // Update the map object with specified options.
    const map = gmpMapElement.innerMap;
    map.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Create an advanced marker to show the location of a selected place.
    const advancedMarkerElement = new AdvancedMarkerElement({
        map,
        collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
    });

    // Create an InfoWindow to hold the place details component.
    const infoWindow = new InfoWindow({
        minWidth: 360,
        disableAutoPan: true,
        headerDisabled: true,
        pixelOffset: new Size(0, -10),
    });

    // Event listener for when a place is selected from the autocomplete list.
    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
        // Reset marker and InfoWindow, and prepare the details element.
        placeDetailsParent.appendChild(placeDetailsElement);
        placeDetailsElement.style.display = 'block';
        advancedMarkerElement.position = null;
        infoWindow.close();

        // Request details for the selected place.
        const placeDetailsRequest = placeDetailsElement.querySelector(
            'gmp-place-details-place-request'
        );
        placeDetailsRequest.place = event.place.id;
    });

    // Event listener for when the place details have finished loading.
    placeDetailsElement.addEventListener('gmp-load', () => {
        const location = placeDetailsElement.place?.location;
        if (!location) {
            advancedMarkerElement.position = null;
            return;
        }

        // Position the marker and open the InfoWindow at the place's location.
        advancedMarkerElement.position = location;
        infoWindow.setContent(placeDetailsElement);
        infoWindow.open({
            map,
            anchor: advancedMarkerElement,
        });
        map.setCenter(location);
    });

    // Event listener to close the InfoWindow when the map is clicked.
    map.addListener('click', () => {
        infoWindow.close();
        advancedMarkerElement.position = null;
    });

    // Event listener for when the map finishes moving (panning or zooming).
    map.addListener('idle', () => {
        const newCenter = map.getCenter();

        // Update the autocomplete's location bias to a 10km radius around the new map center.
        placeAutocompleteElement.locationBias = new Circle({
            center: newCenter,
            radius: 10000, // 10km in meters.
        });
    });
}

void init();

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

gmp-map {
    height: 100%;
}

gmp-basic-place-autocomplete {
    position: absolute;
    height: 30px;
    width: 500px;
    top: 10px;
    left: 10px;
    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
    color-scheme: light;
    border-radius: 10px;
}

HTML

<html>
    <head>
        <title>Basic Place Autocomplete map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="37.4220656,-122.0840897"
            map-id="DEMO_MAP_ID">
            <gmp-basic-place-autocomplete
                slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
        </gmp-map>
        <!-- Use inline styles to configure the Place Details Compact element because
     it will be placed within the info window, and info window content is inside 
     the shadow DOM when using <gmp-map> -->
        <gmp-place-details-compact
            orientation="horizontal"
            style="
                width: 400px;
                display: none;
                border: none;
                padding: 0;
                margin: 0;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request></gmp-place-details-place-request>
            <gmp-place-standard-content></gmp-place-standard-content>
        </gmp-place-details-compact>
    </body>
</html>