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

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

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

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

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

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

มีอะไรใหม่

เราได้ปรับปรุง Place Autocomplete ในลักษณะต่อไปนี้

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

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

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

TypeScript

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

JavaScript

// Request needed libraries.
(await google.maps.importLibrary('places'));
// Create the input HTML element, and append it.
const placeAutocomplete = new google.maps.places.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 กับ placeAutocompleteElement ดังที่แสดงใน ตัวอย่างต่อไปนี้

// 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...';

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

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

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

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

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

หากต้องการจำกัดการค้นหาสถานที่ไปยังประเทศหนึ่งๆ หรือหลายประเทศ ให้ใช้พร็อพเพอร์ตี้ 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-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
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.ts

JavaScript

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
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 เหตุการณ์จะแสดงออบเจ็กต์ของคลาสสถานที่ โทรหา place.fetchFields() เพื่อรับฟิลด์ข้อมูลรายละเอียดสถานที่ ที่จำเป็นสำหรับแอปพลิเคชันของคุณ

ในตัวอย่างถัดไป ผู้ฟังจะขอข้อมูลสถานที่และแสดงข้อมูลนั้นบนแผนที่

TypeScript

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

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

    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);

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

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // 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);
    }
    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);
    updateInfoWindow(content, place.location);
    marker.position = place.location;
});index.js

ดูตัวอย่างโค้ดที่สมบูรณ์

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

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

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

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

TypeScript

async function initMap(): Promise<void> {
    // Request needed libraries.
    (await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.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-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    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);
    });
}

initMap();index.ts

JavaScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('places'));
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.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-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    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);
    });
}
initMap();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>
    </head>
    <body>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>

        <!-- prettier-ignore -->
        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </body>
</html>index.html

ลองใช้ตัวอย่าง

JSFiddle.net

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

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

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
const placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
let innerMap;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap(): Promise<void> {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

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

    infoWindow = new google.maps.InfoWindow({});

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

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

      let content = document.createElement('div');
      let nameText = document.createElement('span');
      nameText.textContent = place.displayName;
      content.appendChild(nameText);
      content.appendChild(document.createElement('br'));
      let addressText = document.createElement('span');
      addressText.textContent = place.formattedAddress;
      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,
    });
}

initMap();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });
    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });
    infoWindow = new google.maps.InfoWindow({});
    // Add the gmp-placeselect listener, and display the results on the map.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        // 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);
        }
        let content = document.createElement('div');
        let nameText = document.createElement('span');
        nameText.textContent = place.displayName;
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        let addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress;
        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,
    });
}
initMap();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>
        <!-- prettier-ignore -->
        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</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

ลองใช้ตัวอย่าง

JSFiddle.net

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ไม่ ไม่จำเป็น ต้องใช้แค่ที่อยู่และสถานที่

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

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

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

ใช่

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

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

ไม่

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

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

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

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

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

หากการหน่วงเวลาคำขอช่วยให้คำขอแบบเป็นโปรแกรมโดยเฉลี่ยต่ำกว่า 4 ได้ คุณสามารถทำตามคำแนะนำในการติดตั้งใช้งาน Autocomplete ที่มีประสิทธิภาพ (ใหม่) ด้วย 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" บนเกาะคาไวในฮาวาย

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

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

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

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

การจำกัดตำแหน่ง

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

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