Halaman ini diterjemahkan oleh Cloud Translation API.

Apa itu Places UI Kit dan bagaimana cara menggunakannya untuk membuat solusi yang menarik?

Pengantar

Bagi jutaan pengguna di seluruh dunia, Google Maps adalah sumber utama untuk mendapatkan informasi tempat yang akurat dan terbaru. Database lengkap Google yang berisi lebih dari 250 juta tempat di seluruh dunia, termasuk ulasan, foto, dan rating pengguna, memberikan tingkat detail dan kepercayaan yang tak tertandingi. Untuk menyediakan data yang baru dan faktual, kami melakukan 100 juta pembaruan pada peta setiap hari.

Places UI Kit adalah library komponen siap pakai dan hemat biaya, serta didukung oleh informasi ekstensif Google Maps tentang tempat. Dengan begitu, Anda dapat mengintegrasikan pengalaman Tempat Google yang tepercaya dan sudah dikenal ke kasus penggunaan front-end Anda di peta pilihan Anda.

Komponen

Kit UI Places menawarkan serangkaian komponen UI individual yang dapat digunakan secara terpisah atau bersama-sama untuk menciptakan pengalaman Places yang lancar.

Detail Tempat: Komponen ini merender informasi mendetail tentang suatu tempat, seperti nama, alamat, nomor telepon, situs, jam buka, dan ulasan pengguna.
Penelusuran Tempat: Komponen ini menampilkan daftar tempat terdekat berdasarkan kategori atau melalui penelusuran teks bebas.
Pelengkapan Otomatis Tempat Dasar: Komponen ini membuat kolom input teks, yang menampilkan daftar dropdown tempat yang diprediksi dan cocok dengan input.

Manfaat Utama Kit UI Tempat

Kemudahan Penggunaan: Gabungkan pengalaman pengguna tepercaya Google untuk Tempat ke dalam aplikasi Anda dengan kode minimal.
Penggunaan di Peta Apa Pun: Untuk pertama kalinya, Anda dapat menggunakan konten Places di peta non-Google.
UI yang familiar: Komponen ini menyediakan antarmuka pengguna yang konsisten dengan pengalaman Google Maps, sehingga intuitif bagi pengguna.
Kustomisasi: Places UI Kit menawarkan opsi kustomisasi visual yang luas tanpa biaya tambahan. Anda dapat menggunakan berbagai setelan dan properti CSS kustom untuk mengonfigurasi elemen tampilan.
Hemat Biaya: Places UI Kit dapat menjadi solusi yang lebih hemat biaya dibandingkan dengan menggunakan Places API secara langsung.

Kasus Penggunaan di Dunia Nyata

Kit UI Places dapat digunakan dalam berbagai aplikasi untuk meningkatkan pengalaman pengguna.

Aplikasi Penemuan Lokal: Aplikasi "aktivitas yang dapat dilakukan" dapat menggunakan komponen Place Search untuk menampilkan daftar restoran, kafe, atau tempat wisata di sekitar. Saat pengguna memilih tempat dari daftar, komponen Detail Tempat dapat digunakan untuk menampilkan informasi selengkapnya tentang lokasi tersebut.
Aplikasi Perencanaan Perjalanan: Aplikasi perjalanan dapat menggunakan Penelusuran Tempat untuk memungkinkan pengguna menelusuri hotel atau tempat menarik di kota tertentu. Komponen Detail Tempat kemudian dapat menampilkan foto, rating, dan ulasan untuk setiap lokasi guna membantu perencanaan.
Portal Penelusuran Properti dan Real Estate: Aplikasi properti dapat menggunakan komponen Penelusuran Tempat untuk menampilkan berbagai kategori tempat terdekat guna membantu calon pembeli atau penyewa rumah memahami kecocokan gaya hidup di lingkungan tersebut sebelum mereka menjadwalkan kunjungan.
Aplikasi Media Sosial dan Aplikasi Pesan: Aplikasi media sosial dan aplikasi pesan dapat menggunakan Penelusuran Tempat untuk menelusuri dan menyarankan tempat di sekitar guna membantu pengguna menemukan tempat pertemuan dengan mudah. Komponen Place Details dapat digunakan untuk menampilkan informasi tempat yang lengkap saat pengguna membagikan tempat. Dengan menggunakan tombol Google Maps bawaan, pengguna dapat dengan mudah dan akurat menjelajahi lokasi dan informasi perjalanan lebih lanjut di Google Maps.

Penyesuaian

Kualitas konten dan gaya komponen Places UI Kit dapat disesuaikan agar sesuai dengan kebutuhan Anda.

Dengan menggunakan properti CSS kustom, misalnya properti CSS untuk Komponen Detail Tempat, Anda dapat menyesuaikan tampilan dan nuansa komponen agar sesuai dengan desain aplikasi Anda. Anda dapat menyesuaikan warna, font, dan aspek visual lainnya. Penting untuk mematuhi persyaratan atribusi saat melakukan modifikasi visual. Misalnya, Anda dapat mengubah warna utama yang digunakan untuk link dan jumlah ulasan dengan properti CSS --gmp-mat-color-primary.

Anda dapat mengontrol konten tempat tertentu yang ditampilkan menggunakan elemen gmp-place-content-config bertingkat untuk memilih dan mengonfigurasi konten, atau cukup menggunakan gmp-place-all-content untuk menampilkan semua konten yang tersedia.

Alat penyesuaian tersedia dalam dokumentasi untuk membantu Anda memvisualisasikan berbagai konfigurasi gaya.

Panduan Penerapan

Kit UI Places tersedia melalui Maps JavaScript dan Places SDK untuk Android dan iOS.

Memulai

Untuk mulai menggunakan Kit UI Places, Anda harus mengikuti langkah-langkah berikut:

Siapkan project Google Cloud Anda: Anda memerlukan project Cloud dengan akun penagihan untuk menggunakan Places UI Kit.
Aktifkan Places UI Kit: Anda harus mengaktifkan Places UI Kit untuk project Anda.
Mendapatkan kunci API: Kunci API diperlukan untuk mengautentikasi permintaan Anda.

Untuk mengetahui detail khusus platform lainnya, lihat panduan memulai Kit UI Places untuk JavaScript, Android, dan iOS.

Contoh Penerapan

Berikut contoh penerapan Place Search dan Place Details dengan peta JavaScript dinamis. Pengguna dapat menelusuri tempat terdekat berdasarkan teks bebas. Saat mengklik tempat dalam daftar hasil penelusuran, komponen Place Details akan ditampilkan di peta dinamis.

Berikut adalah cuplikan kode. Anda dapat menemukan demo dan kode lengkap di repo GitHub ini.

Sebelum memulai, pastikan Anda telah menyelesaikan langkah-langkah Memulai di atas yang relevan dengan JavaScript.

Muat library yang diperlukan di HTML.

<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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Di HTML, tambahkan penampung peta, kolom input teks, dan tombol penelusuran. Penampung peta ini akan menyimpan peta dinamis yang akan dibuat di JavaScript. Kotak input memungkinkan pengguna mengetik kueri penelusuran.

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

Tambahkan komponen Penelusuran Tempat. Komponen Place Search menyediakan tata letak horizontal dan vertikal. Dalam contoh ini, kita menggunakan tata letak horizontal. Atribut “dapat dipilih” memungkinkan item daftar hasil penelusuran dapat diklik (peristiwa gmp-select akan dipicu saat diklik).

Dalam elemen gmp-place-search, kita menambahkan dua elemen turunan:

gmp-place-all-content digunakan untuk menampilkan semua konten yang tersedia
gmp-place-text-search-request digunakan untuk mengonfigurasi elemen Penelusuran Tempat.

Dalam contoh ini, kita akan menyetel konfigurasi di JavaScript

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

Selanjutnya, tambahkan komponen Detail Tempat, yang tersedia dalam tata letak ringkas dan penuh, yang masing-masing mendukung orientasi vertikal dan horizontal. Contoh ini menggunakan tata letak horizontal ringkas. Seperti komponen Place Search, kita menambahkan dua elemen turunan:

gmp-place-all-content menunjukkan bahwa semua konten yang tersedia ditampilkan
gmp-place-details-place-request digunakan untuk memilih tempat.

Dalam contoh ini, kita akan menyetel tempat di JavaScript

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

Di JavaScript, impor library yang kita perlukan untuk contoh ini. Library Places mengimpor library Places UI Kit untuk JavaScript.

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

Buat peta dinamis.

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

Tambahkan pemroses klik ke tombol penelusuran untuk memulai penelusuran tempat. Saat hasil penelusuran dimuat, buat penanda untuk setiap tempat dan tambahkan pemroses klik ke penanda tersebut. Mengklik penanda kemudian akan meminta dan menampilkan Detail Tempat yang sesuai.

Saat tempat ditemukan dan elemen Place Search dimuat, properti tempat dari elemen Place Search diisi dengan array hasil. Setiap hasil adalah objek tempat yang berisi ID tempat, koordinat, dan area tampilan. Untuk mengambil detail, teruskan ID Tempat atau seluruh objek tempat ke elemen Place Details.

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

Pastikan untuk melihat demo dan kode lengkap di repo GitHub ini.

Sumber untuk membantu Anda membuat

Kontributor

Penulis utama:

Teresa Qin | Google Maps Platform Solutions Engineer

Apa itu Places UI Kit dan bagaimana cara menggunakannya untuk membuat solusi yang menarik? Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.