รับ Maps Demo Key: ทดลองใช้ฟีเจอร์บางอย่างของ Maps JavaScript API และ Places UI Kit โดยไม่มีค่าใช้จ่ายด้วย Maps Demo Key โดยไม่ต้องระบุข้อมูลสำหรับการเรียกเก็บเงิน

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

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

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

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

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

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

มีอะไรใหม่

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

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

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

หากต้องการเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติลงในหน้าเว็บ ให้สร้าง 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

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

หากต้องการดูรายละเอียดสถานที่สำหรับสถานที่ที่เลือก ให้เพิ่ม Listener gmp-select ลงใน 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 (ข้อมูลอ้างอิง Place) เรียกใช้ 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 แสดงข้อผิดพลาด
ตรวจสอบว่าแอปของคุณจัดการกรณีที่ไม่มีการเลือกและเสนอวิธีให้ผู้ใช้ดำเนินการต่อ

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

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

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

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

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

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

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

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

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

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

การเติมข้อความอัตโนมัติตามเซสชัน (ใหม่) พร้อมรายละเอียดสถานที่ (ใหม่)

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

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

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

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

การเติมข้อความอัตโนมัติ (ใหม่) ต่อคำขอด้วย Geocoding API

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

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

การเติมข้อความอัตโนมัติตามเซสชัน (ใหม่) สำหรับแอปพลิเคชันที่ใช้ที่อยู่เท่านั้น

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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