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

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

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

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

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

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

มีอะไรใหม่

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

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

วิดเจ็ตการเติมข้อความอัตโนมัติจะสร้าง ช่องป้อนข้อความ แสดงการคาดคะเนสถานที่ในรายการที่เลือกใน 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.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);index.ts

JavaScript

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

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

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

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

TypeScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';
placeAutocomplete.locationBias = center;

const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.ts

JavaScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';
placeAutocomplete.locationBias = center;
const card = document.getElementById('place-autocomplete-card');
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หากต้องการนำ 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.
//@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.
//@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.
//@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) {
        map.fitBounds(place.viewport);
    } else {
        map.setCenter(place.location);
        map.setZoom(17);
    }

    let content = '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
    '<span id="place-address">' + place.formattedAddress + '</span>' +
    '</div>';

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

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//@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) {
        map.fitBounds(place.viewport);
    }
    else {
        map.setCenter(place.location);
        map.setZoom(17);
    }
    let content = '<div id="infowindow-content">' +
        '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
        '<span id="place-address">' + place.formattedAddress + '</span>' +
        '</div>';
    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.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    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.
    //@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.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    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.
    //@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

let map: google.maps.Map;
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.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
      ]);

    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center,
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';
    placeAutocomplete.locationBias = center;

    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

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

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

    // Add the gmp-placeselect listener, and display the results on the map.
    //@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) {
            map.fitBounds(place.viewport);
        } else {
            map.setCenter(place.location);
            map.setZoom(17);
        }

        let content = '<div id="infowindow-content">' +
        '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
        '<span id="place-address">' + place.formattedAddress + '</span>' +
        '</div>';

        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,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();index.ts

JavaScript

let map;
let marker;
let infoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
    ]);
    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map'), {
        center,
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';
    placeAutocomplete.locationBias = center;
    const card = document.getElementById('place-autocomplete-card');
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map,
    });
    infoWindow = new google.maps.InfoWindow({});
    // Add the gmp-placeselect listener, and display the results on the map.
    //@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) {
            map.fitBounds(place.viewport);
        }
        else {
            map.setCenter(place.location);
            map.setZoom(17);
        }
        let content = '<div id="infowindow-content">' +
            '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
            '<span id="place-address">' + place.formattedAddress + '</span>' +
            '</div>';
        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,
        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. 
 */
#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: large;
  font-weight: bold;
}

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>
  </head>
  <body>
    <div class="place-autocomplete-card" id="place-autocomplete-card">
      <p>Search for a place here:</p>
    </div>
    <div id="map"></div>

    <!-- 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

ใช้คอมโพเนนต์เครื่องมือเลือกสถานที่

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

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