Ringkasan
Class Tempat menyediakan API yang lebih sederhana untuk menggunakan Library Tempat dan Maps JavaScript API, serta mendukung pola penggunaan modern seperti Promise.
Memulai
Mendapatkan kunci API dan mengaktifkan API yang diperlukan
Sebelum menggunakan pratinjau class Tempat, Anda memerlukan project Cloud dengan akun penagihan. Anda juga harus mengaktifkan Maps JavaScript API dan Places API. Untuk melakukannya, ikuti petunjuk guna mengaktifkan satu atau beberapa API atau SDK. Perhatikan bahwa kedua API ini harus diaktifkan di project yang sama di Cloud Console.
Mendapatkan kunci APIMemuat Library Tempat
Untuk menggunakan fungsi yang ada di dalam Library Tempat, Anda harus memuatnya terlebih dahulu menggunakan parameter libraries
di URL pemuatan skrip Maps JavaScript API. Untuk versi pratinjau ini, Anda juga harus menentukan v=beta
.
<script async src="https://maps.googleapis.com/maps/api/js?v=beta&key=YOUR_API_KEY&libraries=places&callback=initMap"> </script>
Menemukan tempat berdasarkan kueri teks
Panggil findPlaceFromQuery
untuk menemukan tempat berdasarkan kueri teks. Gunakan parameter fields
untuk menentukan daftar yang dipisahkan koma yang berisi satu atau beberapa kolom data tempat dalam camel case. Gunakan fields: ['*']
untuk menampilkan semua data tempat (hanya untuk pengujian, tidak direkomendasikan di lingkungan produksi).
Contoh berikut menunjukkan penggunaan pola async/await untuk memanggil findPlaceFromQuery
dan menampilkan hasilnya pada peta.
TypeScript
let map: google.maps.Map; let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: centerCoordinates, zoom: 14, // ... }); findPlace(); } async function findPlace() { const request = { query: 'Sports Page', fields: ['displayName', 'location'], locationBias: centerCoordinates, }; const { places } = await google.maps.places.Place.findPlaceFromQuery(request); if (places.length) { const place = places[0]; const location = place.location as google.maps.LatLng; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); map.setCenter(location); } else { console.log('No results'); } }
JavaScript
let map; let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: centerCoordinates, zoom: 14, // ... }); findPlace(); } async function findPlace() { const request = { query: "Sports Page", fields: ["displayName", "location"], locationBias: centerCoordinates, }; const { places } = await google.maps.places.Place.findPlaceFromQuery(request); if (places.length) { const place = places[0]; const location = place.location; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); map.setCenter(location); } else { console.log("No results"); } }
Menemukan tempat berdasarkan nomor telepon
Panggil findPlaceFromPhoneNumber
untuk menemukan tempat berdasarkan nomor telepon. Nomor telepon harus memiliki format internasional (diawali dengan tanda plus ("+"), yang diikuti dengan kode negara, lalu nomor telepon itu sendiri). Lihat Rekomendasi ITU E.164 untuk mengetahui informasi selengkapnya. Gunakan parameter fields
untuk menentukan daftar yang dipisahkan koma yang berisi satu atau beberapa kolom data tempat dalam camel case. Gunakan fields: ['*']
untuk menampilkan semua data tempat (hanya untuk pengujian, tidak direkomendasikan di lingkungan produksi).
Contoh berikut menunjukkan penggunaan pola async/await untuk memanggil findPlaceFromPhoneNumber
dan menampilkan hasilnya pada peta.
TypeScript
async function findPlaceByPhone() { const request = { phoneNumber: '+1(206)787-5388', fields: ['displayName', 'location'], } const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(request); if (places.length) { const place = places[0]; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); console.log(place.displayName); } else { console.log('No results'); } }
JavaScript
async function findPlaceByPhone() { const request = { phoneNumber: "+1(206)787-5388", fields: ["displayName", "location"], }; const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber( request ); if (places.length) { const place = places[0]; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); console.log(place.displayName); } else { console.log("No results"); } } window.initMap = initMap;
Mendapatkan Place Details
Jika sudah memiliki objek Place
atau ID tempat, Anda dapat memanggil Place.fetchFields
untuk mendapatkan detail selengkapnya tentang tempat tersebut. Gunakan parameter fields
untuk menentukan daftar yang dipisahkan koma yang berisi satu atau beberapa kolom data tempat dalam camel case. Gunakan fields: ['*']
untuk menampilkan semua kolom data (hanya untuk pengujian, tidak direkomendasikan di lingkungan produksi).
TypeScript
async function getPlaceDetails() { // Use place ID to create a new Place instance. const place = new google.maps.places.Place({ id: 'ChIJN1t_tDeuEmsRUsoyG83frY4', requestedLanguage: 'en', // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ['displayName', 'formattedAddress'] }); // Show the result console.log(place.displayName); console.log(place.formattedAddress); }
JavaScript
async function getPlaceDetails() { // Use place ID to create a new Place instance. const place = new google.maps.places.Place({ id: "ChIJN1t_tDeuEmsRUsoyG83frY4", requestedLanguage: "en", // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ["displayName", "formattedAddress"] }); // Show the result console.log(place.displayName); console.log(place.formattedAddress); }
Kolom data tempat
Kolom akan sesuai dengan hasil Place Details, dan dibagi menjadi tiga kategori penagihan, yaitu Basic, Contact, dan Atmosphere. Kolom Basic ditagih dengan tarif dasar dan tidak dikenai biaya tambahan. Kolom Contact dan Atmosphere ditagih dengan tarif lebih tinggi.
Lihat sheet harga untuk mengetahui informasi selengkapnya. Atribusi (html_attributions
) selalu ditampilkan dengan setiap panggilan, terlepas dari apakah kolom ini telah diminta atau tidak.
Class Place mendukung kolom berikut:
Basic Data
Kolom | Class Place (khusus saluran v=beta) |
---|---|
Komponen Alamat | addressComponents |
Status Bisnis | businessStatus |
Alamat yang Diformat | adrFormatAddress |
Lokasi | location |
Ikon | icon |
URI Dasar Mask Ikon | svgIconMaskUri |
Warna Latar Belakang Ikon | iconBackgroundColor |
Nama | displayName |
Foto | photos |
ID Tempat | id |
Plus Codes | plusCode |
Jenis | types |
URL | websiteURI |
Offset UTC | utcOffsetMinutes |
Area Pandang | viewport |
Pintu Masuk Khusus Pengguna Kursi Roda | hasWheelchairAccessibleEntrance |
Kolom Contact Data
Kolom | Class Place (khusus saluran v=beta) |
---|---|
Nomor Telepon | nationalPhoneNumber |
Nomor Telepon Internasional | internationalPhoneNumber |
Jam Buka | openingHours |
Situs | websiteURI |
Kolom Atmosphere Data
Kolom | Class Place (khusus saluran v=beta) |
---|---|
Ambil di Tepi Jalan | hasCurbsidePickup |
Pesan Antar | hasDelivery |
Makan di Tempat | hasDineIn |
Tingkat Harga | priceLevel |
Rating | rating |
Dapat Direservasi | isReservable |
Ulasan | reviews |
Menyajikan Bir | servesBeer |
Menyajikan Sarapan | servesBreakfast |
Menyediakan Sarapan Siang | servesBrunch |
Menyajikan Makan Malam | servesDinner |
Menyajikan Makan Siang | servesLunch |
Menyajikan Makanan Vegetarian | servesVegetarianFood |
Menyajikan Wine | servesWine |
Bawa Pulang | hasTakeout |
Total Rating Pengguna | userRatingsCount |