Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (EEA)

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

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

หากต้องการใช้ Place Autocomplete คุณต้องเปิดใช้ Places API (ใหม่) ในโปรเจ็กต์ Google Cloud ดูรายละเอียดได้ที่เริ่มต้นใช้งาน

มีอะไรใหม่

เราได้ปรับปรุง Place Autocomplete ในด้านต่อไปนี้

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

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

หากต้องการเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงในหน้าเว็บ ให้สร้าง google.maps.places.PlaceAutocompleteElement, ใหม่ แล้วเพิ่มลงในหน้าเว็บดังที่แสดงในตัวอย่างต่อไปนี้

TypeScript

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

JavaScript

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

ดูตัวอย่างโค้ดแบบเต็ม

หากที่อยู่สำหรับการเรียกเก็บเงินอยู่นอก เขตเศรษฐกิจยุโรป (EEA) คุณอาจใช้วิดเจ็ตการเติมข้อความอัตโนมัติกับ Google Maps ได้ด้วย

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

// In your TS or JS, request the needed libraries.
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");

จากนั้นใน HTML ให้ซ้อนองค์ประกอบ gmp-place-autocomplete ใหม่ไว้ภายใน div และซ้อน div นั้นไว้ภายใน gmp-map ดังที่แสดงใน ตัวอย่างต่อไปนี้

<gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
    <div
        class="place-autocomplete-card"
        slot="control-inline-start-block-start">
        <gmp-place-autocomplete
            placeholder="Search for a place..."></gmp-place-autocomplete>
    </div>
</gmp-map>index.html

หากต้องการเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงในแผนที่โดยใช้โปรแกรม ให้สร้าง google.maps.places.PlaceAutocompleteElement อินสแตนซ์ใหม่ เพิ่ม PlaceAutocompleteElement ลงใน div และใช้แอตทริบิวต์ slot กับ div ดังที่แสดงในตัวอย่างต่อไปนี้

// In your TS or JS, request the needed libraries.
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");

// Get the map element.
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

// Create the PlaceAutocompleteElement instance.
const placeAutocomplete = new PlaceAutocompleteElement({});

// Create a div and append the PlaceAutocompleteElement to it.
const card = document.createElement("div");
card.appendChild(placeAutocomplete);

// Apply the slot attribute to the div.
// This positions the control in the top-left corner of the map.
card.setAttribute("slot", "control-inline-start-block-start");

// Append the div to the map element (check for null).
if (mapElement) {
    mapElement.appendChild(card);
}

ดูตัวอย่างโค้ดแบบเต็ม

เพิ่มข้อความตัวยึดตำแหน่ง

ใช้พร็อพเพอร์ตี้ placeholder เพื่อเพิ่มข้อความตัวยึดตำแหน่ง ตัวอย่างต่อไปนี้แสดงการตั้งค่าข้อความตัวยึดตำแหน่งใน HTML:

<gmp-place-autocomplete
  placeholder="Search for a place..."
></gmp-place-autocomplete>

นอกจากนี้ คุณยังตั้งค่าข้อความตัวยึดตำแหน่งโดยใช้โปรแกรมได้ด้วย

placeAutocomplete.placeholder = 'Search for a place...';

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

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

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

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

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

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

placeAutocomplete.includedRegionCodes = ['us', 'au'];;

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

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

// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});

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

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

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

placeAutocomplete.locationBias = {radius: 100, center: {lat: 40.749933, lng: -73.98633}};

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

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

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

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

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

ดูรายละเอียดสถานที่

หากต้องการดูรายละเอียดสถานที่สำหรับสถานที่ที่เลือก ให้เพิ่ม gmp-select Listener ลงใน PlaceAutocompleteElement, ดังที่แสดงในตัวอย่างต่อไปนี้

TypeScript

// Add the gmp-select listener, and display the results.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({
        placePrediction,
    }: google.maps.places.PlacePredictionSelectEvent) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(),
            /* replacer */ null,
            /* space */ 2
        );
    }
);index.ts

JavaScript

// Add the gmp-select listener, and display the results.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(),
            /* replacer */ null,
            /* space */ 2
        );
    }
);index.js

ดูตัวอย่างโค้ดแบบเต็ม

ในตัวอย่างก่อนหน้านี้ Listener เหตุการณ์จะได้รับ PlacePredictionSelectEvent และเรียก placePrediction.toPlace() เพื่อรับอินสแตนซ์คลาสสถานที่ (Place reference) เรียก place.fetchFields() เพื่อรับรายละเอียดสถานที่ ฟิลด์ข้อมูล ที่แอปพลิเคชันของคุณต้องการ

Listener ในตัวอย่างถัดไปจะขอช่อง displayName, formattedAddress, location, และ viewport ใน place.fetchFields() จากนั้นใช้ place.viewport กับ fitBounds() เพื่อแสดงสถานที่ที่เลือกบนแผนที่

TypeScript

// Add the gmp-select listener, and display the results on the map.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'viewport',
            ],
        });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        } else {
            innerMap.setCenter(place.location!);
            innerMap.setZoom(17);
        }

        const content = document.createElement('div');
        const nameText = document.createElement('span');
        nameText.textContent = place.displayName ?? 'No name';
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        const addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress ?? 'No address';
        content.appendChild(addressText);

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    }
);index.ts

JavaScript

// Add the gmp-select listener, and display the results on the map.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'viewport',
            ],
        });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        } else {
            innerMap.setCenter(place.location);
            innerMap.setZoom(17);
        }

        const content = document.createElement('div');
        const nameText = document.createElement('span');
        nameText.textContent = place.displayName ?? 'No name';
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        const addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress ?? 'No address';
        content.appendChild(addressText);

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    }
);index.js

ดูตัวอย่างโค้ดแบบเต็ม

แผนที่ตัวอย่าง

ส่วนนี้มีโค้ดแบบเต็มสำหรับแผนที่ตัวอย่างที่แสดงในหน้านี้

องค์ประกอบการเติมข้อความอัตโนมัติ

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

TypeScript

async function init(): Promise<void> {
    // Request needed libraries.
    const { PlaceAutocompleteElement } =
        await google.maps.importLibrary('places');
    // Create the input HTML element, and append it.
    const placeAutocomplete = new PlaceAutocompleteElement();
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-select listener, and display the results.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({
            placePrediction,
        }: google.maps.places.PlacePredictionSelectEvent) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: ['displayName', 'formattedAddress', 'location'],
            });
            selectedPlaceTitle.textContent = 'Selected Place:';
            selectedPlaceInfo.textContent = JSON.stringify(
                place.toJSON(),
                /* replacer */ null,
                /* space */ 2
            );
        }
    );
}

void init();index.ts

JavaScript

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

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-select listener, and display the results.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: ['displayName', 'formattedAddress', 'location'],
            });
            selectedPlaceTitle.textContent = 'Selected Place:';
            selectedPlaceInfo.textContent = JSON.stringify(
                place.toJSON(),
                /* replacer */ null,
                /* space */ 2
            );
        }
    );
}

void init();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}
style.css

HTML

<html>
    <head>
        <title>Place Autocomplete element</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>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>
    </body>
</html>index.html

แผนที่การเติมข้อความอัตโนมัติ

ตัวอย่างนี้แสดงวิธีเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงใน Google Maps

TypeScript

const mapElement = document.querySelector('gmp-map')!;
const placeAutocomplete = document.querySelector('gmp-place-autocomplete')!;
let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function init(): Promise<void> {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds()!;
    });

    // Create the marker and infoWindow.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new InfoWindow();

    // Add the gmp-select listener, and display the results on the map.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'viewport',
                ],
            });

            // If the place has a geometry, then present it on a map.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location!);
                innerMap.setZoom(17);
            }

            const content = document.createElement('div');
            const nameText = document.createElement('span');
            nameText.textContent = place.displayName ?? 'No name';
            content.appendChild(nameText);
            content.appendChild(document.createElement('br'));
            const addressText = document.createElement('span');
            addressText.textContent = place.formattedAddress ?? 'No address';
            content.appendChild(addressText);

            updateInfoWindow(content, place.location);
            marker.position = place.location;
        }
    );
}

// Helper function to create an info window.
function updateInfoWindow(
    content: string | Element | Text | null | undefined,
    center: google.maps.LatLng | google.maps.LatLngLiteral | null | undefined
) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

void init();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

    // Create the marker and infoWindow.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new InfoWindow();

    // Add the gmp-select listener, and display the results on the map.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'viewport',
                ],
            });

            // If the place has a geometry, then present it on a map.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location);
                innerMap.setZoom(17);
            }

            const content = document.createElement('div');
            const nameText = document.createElement('span');
            nameText.textContent = place.displayName ?? 'No name';
            content.appendChild(nameText);
            content.appendChild(document.createElement('br'));
            const addressText = document.createElement('span');
            addressText.textContent = place.formattedAddress ?? 'No address';
            content.appendChild(addressText);

            updateInfoWindow(content, place.location);
            marker.position = place.location;
        }
    );
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

void init();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.place-autocomplete-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 5px;
    font-family: Roboto, sans-serif;
    font-size: small;
}

gmp-place-autocomplete {
    width: 300px;
}

#infowindow-content .title {
    font-weight: bold;
}

#map #infowindow-content {
    display: inline;
}
style.css

HTML

<html>
    <head>
        <title>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 center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <gmp-place-autocomplete
                    placeholder="Search for a place..."></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>index.html

การเพิ่มประสิทธิภาพการเติมข้อความอัตโนมัติ (ใหม่)

ส่วนนี้อธิบายแนวทางปฏิบัติแนะนำที่จะช่วยให้คุณใช้ประโยชน์จาก บริการการเติมข้อความอัตโนมัติ (ใหม่) ได้อย่างเต็มที่

หลักเกณฑ์ทั่วไปมีดังนี้

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

แนวทางปฏิบัติแนะนำในการเพิ่มประสิทธิภาพต้นทุน

การเพิ่มประสิทธิภาพต้นทุนขั้นพื้นฐาน

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

การเพิ่มประสิทธิภาพต้นทุนขั้นสูง

พิจารณาการใช้งานการเติมข้อความอัตโนมัติ (ใหม่) โดยใช้โปรแกรมเพื่อเข้าถึง SKU: ราคาการส่งคำขอการเติมข้อความอัตโนมัติ และส่งคำขอ ผลการค้นหา Geocoding API เกี่ยวกับสถานที่ที่เลือกแทนรายละเอียดสถานที่ (ใหม่) การกำหนดราคาต่อคำขอเมื่อใช้ร่วมกับ Geocoding API จะคุ้มค่ากว่าการกำหนดราคาต่อเซสชัน (อิงตามเซสชัน) หากเป็นไปตามเงื่อนไขทั้ง 2 ข้อต่อไปนี้

หากคุณต้องการเพียงละติจูดและลองจิจูดหรือที่อยู่ของสถานที่ที่ผู้ใช้เลือก Geocoding API จะให้ข้อมูลนี้ ในราคาที่ถูกกว่าการเรียกรายละเอียดสถานที่ (ใหม่)
หากผู้ใช้เลือกการคาดคะเนการเติมข้อความอัตโนมัติภายในคำขอการคาดคะเนการเติมข้อความอัตโนมัติ (ใหม่) โดยเฉลี่ย 4 คำขอหรือน้อยกว่า การกำหนดราคาต่อคำขออาจคุ้มค่ากว่าการกำหนดราคาต่อเซสชัน

หากต้องการความช่วยเหลือในการเลือกการใช้งานการเติมข้อความอัตโนมัติ (ใหม่) ที่เหมาะกับความต้องการของคุณ ให้เลือกแท็บที่ตรงกับคำตอบของคำถามต่อไปนี้

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

ใช่ ต้องใช้รายละเอียดเพิ่มเติม

ใช้การเติมข้อความอัตโนมัติ (ใหม่) แบบอิงตามเซสชันร่วมกับรายละเอียดสถานที่ (ใหม่)
เนื่องจากแอปพลิเคชันของคุณต้องใช้รายละเอียดสถานที่ (ใหม่) เช่น ชื่อสถานที่ สถานะธุรกิจ หรือเวลาทำการ การใช้งานการเติมข้อความอัตโนมัติ (ใหม่) ของคุณจึงควรใช้โทเค็นเซสชัน (โดยใช้โปรแกรมหรือสร้างไว้ใน JavaScript, Android, หรือ iOS วิดเจ็ต) ต่อเซสชัน รวมถึง SKU ของ Places ที่เกี่ยวข้อง ทั้งนี้ขึ้นอยู่กับช่องข้อมูลสถานที่ที่คุณขอ¹

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

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

รหัสสถานที่จาก คำตอบการเติมข้อความอัตโนมัติ (ใหม่)
โทเค็นของเซสชันที่ใช้ในคำขอการเติมข้อความอัตโนมัติ (ใหม่)
พารามิเตอร์ fields ที่ระบุ ฟิลด์ข้อมูลการเติมข้อความอัตโนมัติ (ใหม่) ที่คุณต้องการ

ไม่ ต้องการเพียงที่อยู่และสถานที่

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

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

โดยเฉลี่ยแล้ว ผู้ใช้เลือกการคาดคะเนการเติมข้อความอัตโนมัติ (ใหม่) ภายใน 4 คำขอหรือน้อยกว่าใช่ไหม

ใช่

ใช้งานการเติมข้อความอัตโนมัติ (ใหม่) แบบเป็นโปรแกรมโดยไม่มีโทเค็นของเซสชัน และเรียก Geocoding API สำหรับการคาดคะเนสถานที่ที่เลือก
Geocoding API จะแสดงที่อยู่และพิกัดละติจูด/ลองจิจูด การส่งคำขอ การเติมข้อความอัตโนมัติ 4 คำขอและการเรียก Geocoding API เกี่ยวกับ การคาดคะเนสถานที่ที่เลือกมีค่าใช้จ่ายน้อยกว่าค่าใช้จ่ายต่อเซสชันของการเติมข้อความอัตโนมัติ (ใหม่) ต่อเซสชัน¹

พิจารณาใช้แนวทางปฏิบัติแนะนำด้านประสิทธิภาพเพื่อช่วยให้ผู้ใช้ได้รับการคาดคะเนที่ต้องการโดยใช้อักขระน้อยลง

ไม่ใช่

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

รหัสสถานที่จาก คำตอบการเติมข้อความอัตโนมัติ (ใหม่)
โทเค็นของเซสชันที่ใช้ในคำขอการเติมข้อความอัตโนมัติ (ใหม่)
พารามิเตอร์ fields ที่ระบุช่องต่างๆ เช่น ที่อยู่และเรขาคณิต

พิจารณาการหน่วงเวลาคำขอการเติมข้อความอัตโนมัติ (ใหม่)
คุณสามารถใช้กลยุทธ์ต่างๆ เช่น การหน่วงเวลาคำขอการเติมข้อความอัตโนมัติ (ใหม่) จนกว่าผู้ใช้จะพิมพ์อักขระ 3-4 ตัวแรก เพื่อให้แอปพลิเคชันของคุณส่งคำขอน้อยลง ตัวอย่างเช่น การส่งคำขอการเติมข้อความอัตโนมัติ (ใหม่) สำหรับอักขระแต่ละตัว หลังจาก ที่ผู้ใช้พิมพ์อักขระตัวที่ 3 หมายความว่าหากผู้ใช้พิมพ์อักขระ 7 ตัวแล้วเลือกการคาดคะเนที่คุณส่งคำขอ Geocoding API 1 คำขอ ค่าใช้จ่ายทั้งหมดจะเป็นค่าใช้จ่ายสำหรับการเติมข้อความอัตโนมัติ (ใหม่) ต่อคำขอ 4 คำขอ + Geocoding¹

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

ดูค่าใช้จ่ายได้ที่ รายการราคา Google Maps Platform

แนวทางปฏิบัติแนะนำด้านประสิทธิภาพ

หลักเกณฑ์ต่อไปนี้อธิบายวิธีเพิ่มประสิทธิภาพการทำงานของการเติมข้อความอัตโนมัติ (ใหม่)

เพิ่มข้อจำกัดในแต่ละประเทศ การให้น้ำหนักพิเศษกับบางตำแหน่ง, และ (สำหรับการใช้งานแบบเป็นโปรแกรม) ค่ากำหนดภาษาลงในการใช้งานการเติมข้อความอัตโนมัติ (ใหม่) ไม่จำเป็นต้องกำหนดค่ากำหนดภาษา เมื่อใช้วิดเจ็ต เนื่องจากวิดเจ็ตจะเลือกค่ากำหนดภาษาจากเบราว์เซอร์หรืออุปกรณ์เคลื่อนที่ของผู้ใช้
หากการเติมข้อความอัตโนมัติ (ใหม่) มาพร้อมกับแผนที่ คุณสามารถให้น้ำหนักพิเศษกับบางตำแหน่งตามวิวพอร์ตของแผนที่ได้
ในกรณีที่ผู้ใช้ไม่เลือกการคาดคะเนการเติมข้อความอัตโนมัติ (ใหม่) รายการใดรายการหนึ่ง โดยทั่วไป เนื่องจากการคาดคะเนเหล่านั้นไม่ใช่ที่อยู่ที่ต้องการ คุณสามารถใช้ข้อมูลที่ผู้ใช้ป้อนเดิมซ้ำเพื่อพยายามรับผลการค้นหาที่เกี่ยวข้องมากขึ้นได้ ดังนี้
- หากคาดว่าผู้ใช้จะป้อนเฉพาะข้อมูลที่อยู่ ให้ใช้ข้อมูลที่ผู้ใช้ป้อนเดิมซ้ำ ในการเรียก Geocoding API
- หากคาดว่าผู้ใช้จะป้อนคำค้นหาสถานที่ที่เฉพาะเจาะจงตามชื่อหรือที่อยู่ ให้ใช้คำขอรายละเอียดสถานที่ (ใหม่) หากคาดว่าจะแสดงผลการค้นหาในภูมิภาคที่เฉพาะเจาะจงเท่านั้น ให้ใช้การให้น้ำหนักพิเศษกับบางตำแหน่ง
สถานการณ์อื่นๆ ที่ควรกลับไปใช้ Geocoding API ได้แก่
- ผู้ใช้ป้อนที่อยู่ย่อย เช่น ที่อยู่ของยูนิตหรืออพาร์ตเมนต์ที่เฉพาะเจาะจงภายในอาคาร ตัวอย่างเช่น ที่อยู่ "Stroupežnického 3191/17, Praha" ของเช็กจะแสดงการคาดคะเนบางส่วนในการเติมข้อความอัตโนมัติ (ใหม่)
- ผู้ใช้ป้อนที่อยู่ที่มีคำนำหน้าเป็นส่วนของถนน เช่น "23-30 29th St, Queens" ใน นิวยอร์กซิตี้ หรือ "47-380 Kamehameha Hwy, Kaneohe" บนเกาะ Kauai ในฮาวาย

การให้น้ำหนักพิเศษกับบางตำแหน่ง

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

คำเตือน: หากไม่ได้ระบุ radius ระบบจะไม่สนใจพารามิเตอร์ location

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

การจำกัดสถานที่ตั้ง

จำกัดผลการค้นหาให้อยู่ในพื้นที่ที่ระบุโดยส่งพารามิเตอร์ locationRestriction

นอกจากนี้ คุณยังจำกัดผลการค้นหาให้อยู่ในภูมิภาคที่กำหนดโดย location และพารามิเตอร์ radius ได้ด้วยการเพิ่มพารามิเตอร์ locationRestriction ซึ่งจะสั่งให้การเติมข้อความอัตโนมัติ (ใหม่) แสดงผลการค้นหา เฉพาะ ภายในภูมิภาคนั้น