Ikuti langkah-langkah berikut untuk menambahkan Library Konteks Lokal ke project Anda, menginisialisasi, dan mengonfigurasi tampilan peta Konteks Lokal.
Mengaktifkan API dan SDK yang diperlukan
Untuk menggunakan Library Konteks Lokal, Anda harus mengaktifkan Maps JavaScript API dan Places API. Untuk melakukannya, ikuti petunjuk untuk Mengaktifkan satu atau beberapa API atau SDK. Perhatikan bahwa kedua API ini harus diaktifkan di project yang sama di Konsol Google Cloud.
Memuat Library Konteks Lokal
Untuk memuat Library Konteks Lokal, muatkan Maps JavaScript API seperti biasa, dan sertakan parameter berikut:
libraries=localContext
memuat Library Konteks Lokal.v=beta
diperlukan untuk menggunakan rilis ini.key
berisi kunci API Anda.callback
mengeksekusi fungsiinitMap()
.
Contoh berikut menunjukkan tag skrip dengan semua opsi yang disebutkan di atas:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext&v=beta&callback=initMap">
</script>
Membuat tampilan peta Konteks Lokal yang baru
Untuk menambahkan Library Konteks Lokal ke halaman web, pertama-tama buat instance LocalContextMapView
, dan tetapkan properti yang diinginkan:
element
- Elemendiv
tempat peta akan ditampilkan (dalam hal ini bernama "peta").placeTypePreferences
- jenis tempat yang harus ditampilkan oleh Library Konteks Lokal (maksimal 10).maxPlaceCount
- Jumlah maksimum tempat yang akan ditampilkan (1 - 24).locationRestriction
(Opsional) - Membatasi penelusuran tempat ke lokasi tertentu. Default-nya adalah area pandang peta.
Setelah memiliki instance LocalContextMapView
, Anda dapat menetapkan Opsi Peta
di instance Map
bagian dalam. Peta yang terdapat dalam LocalContextMapView
mendukung semua opsi peta yang sama seperti Peta Maps JavaScript API standar. Contoh berikut menunjukkan pembuatan instance LocalContextMapView
baru,
dan menetapkan beberapa opsi di Map
dalam:
TypeScript
let map: google.maps.Map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: [ { type: "restaurant" }, { type: "tourist_attraction" }, ], maxPlaceCount: 12, }); map = localContextMapView.map!; map.setOptions({ center: { lat: 51.507307, lng: -0.08114 }, zoom: 14, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: [ { type: "restaurant" }, { type: "tourist_attraction" }, ], maxPlaceCount: 12, }); map = localContextMapView.map; map.setOptions({ center: { lat: 51.507307, lng: -0.08114 }, zoom: 14, }); } window.initMap = initMap;
Menunda pemuatan data Konteks Lokal
Anda dapat menunda pemuatan data Konteks Lokal pada waktu inisialisasi, dengan menetapkan opsi LocalContextMapView
maxPlaceCount
ke 0. Hal ini berguna ketika Anda ingin menunggu hingga pengguna siap melihat data. Jika sudah siap memuat data Konteks Lokal, tetapkan
maxPlaceCount
ke nilai 1 atau lebih. Contoh berikut menunjukkan
inisialisasi peta tanpa memuat data Konteks Lokal, lalu
menetapkan maxPlaceCount
untuk memuat data:
// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
});
//...
// Show places now.
localContextMapView.maxPlaceCount = 12;
Tombol yang menampilkan UI Konteks Lokal
Anda dapat mengalihkan elemen antarmuka pengguna Konteks Lokal dengan menetapkan opsi LocalContextMapView
maxPlaceCount
ke 0. Untuk menampilkan antarmuka pengguna Konteks Lokal lagi, tetapkan maxPlaceCount
ke nilai 1 atau lebih.
Menetapkan dimensi peta minimum
Library Konteks Lokal secara responsif mengubah tampilan berdasarkan ukuran LocalContextMapView
yang dirender. Dimensi minimum yang didukung untuk LocalContextMapView
adalah:
- 300 x 480 piksel (potret)
- 480 x 380 piksel (lanskap)
Saat elemen pemuat untuk LocalContextMapView
berada di bawah dimensi minimum yang didukung, elemen Library Konteks Lokal, termasuk pemilih tempat dan lokasi menarik, tidak akan terlihat.
Tingkat zoom browser memengaruhi dimensi minimum yang didukung. Misalnya, jika jendela browser di-zoom hingga 200%, dimensi minimum yang didukung adalah 600x960 (potret) dan 960x760 (lanskap).
Rekomendasi CSS
Class CSS di DOM Library Konteks Lokal bukan bagian dari API publik, dan penataan gaya, modifikasi, atau pemilihan elemen dalam DOM Library Konteks Lokal tidak didukung. Kami sangat menyarankan pedoman berikut untuk menghindari konflik gaya DOM, dan memastikan tampilan peta Library Konteks Lokal ditampilkan dengan benar:
- Jangan gunakan class CSS Library Konteks Lokal, karena class tersebut dapat berubah tanpa pemberitahuan.
- Jangan menata gaya, memodifikasi, atau memilih elemen dalam DOM Library Konteks Lokal.
Jika Anda menggunakan framework CSS yang membuat modifikasi tersebut, Anda mungkin dapat mengatasi konflik penataan gaya.
Misalnya, jika Anda ingin mengubah keseluruhan halaman box-sizing
menjadi border-box
:
- Gunakan penggantian
box-sizing
yang menetapkan elemen<html>
keborder-box
. - Gunakan
box-sizing: initial
untuk elemen yang berisi tampilan peta Library Konteks Lokal. - Gunakan
box-sizing: inherit
untuk semua elemen lainnya.
Cara ini akan memastikan DOM Library Konteks Lokal mereset
box-sizing
ke default standar dengan pemilih kekhususan rendah.
Tampilannya akan terlihat seperti berikut dalam kode:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.container-for-google-maps {
box-sizing: initial;
}