Bagian ini membahas opsi yang dapat Anda tetapkan pada instance LocalContextMapView
dan Map
bagian dalam yang terdapat di LocalContextMapView
. Saat membuat instance LocalContextMapView
baru, Anda menentukan hingga 10 jenis tempat, bersama dengan jumlah maksimum tempat yang akan ditampilkan (hingga 24). Map
bagian dalam mendukung semua MapOptions yang sama dengan Map
Maps JavaScript API standar.
Anda dapat memperbarui properti penelusuran Konteks Lokal kapan saja setelah Library Konteks Lokal diinisialisasi. Memperbarui salah satu dari maxPlaceCount
, placeTypePreferences
, locationRestriction
, atau locationBias
dapat secara otomatis memicu penelusuran baru.
Menentukan jenis tempat
Anda dapat menentukan hingga 10 jenis tempat yang akan dikembalikan oleh Library Konteks Lokal. Tentukan jenis tempat menggunakan properti placeTypePreferences
, dan dengan meneruskan satu atau beberapa jenis tempat, seperti yang ditunjukkan pada contoh berikut:
placeTypePreferences: ['restaurant', 'cafe']
Pembobotan jenis tempat
Secara opsional, Anda dapat menetapkan bobot relatif untuk setiap jenis yang ditentukan, yang menyebabkan jenis dengan nilai pembobotan yang lebih tinggi akan muncul lebih sering. Bobot adalah parameter lanjutan opsional yang hanya boleh digunakan sesuai kebutuhan. Jika parameter ini dihilangkan, Library Konteks Lokal akan menentukan bobot default, yang dapat berubah dan meningkat seiring waktu.
Anda dapat menetapkan bobot relatif untuk setiap properti menggunakan atribut weight
. Contoh berikut menunjukkan pembobotan jenis tempat yang ditentukan untuk menampilkan hasil restaurant
dan cafe
dua kali lebih banyak daripada untuk primary_school
:
placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]
Hasilnya akan bervariasi, bergantung pada apakah jenis tempat tertentu ada di area tertentu. Misalnya, menetapkan bobot 10 ke shopping_mall
tidak akan berpengaruh jika tidak ada pusat perbelanjaan di area tersebut.
Menetapkan jumlah tempat maksimum
Untuk menetapkan jumlah maksimum tempat (hingga 24) yang akan dikembalikan oleh Library Konteks Lokal, gunakan properti maxPlaceCount
, seperti yang ditampilkan di sini:
maxPlaceCount: 12
Menetapkan pembatasan lokasi
Penelusuran dibatasi menurut area pandang peta secara default. Anda dapat menentukan kumpulan batas untuk membatasi hasil penelusuran pada area yang lebih besar atau lebih kecil. Untuk melakukannya, tetapkan
properti locationRestriction
dari LocalContextMapView
ke
LatLngBounds
yang diinginkan. Nilai ini dapat lebih besar atau lebih kecil daripada area pandang peta.
Lihat contoh.
Mengaktifkan rute
Untuk mengaktifkan rute pada peta, tetapkan properti directionsOptions
dari
LocalContextMapView
, yang meneruskan literal objek LatLng
untuk titik asal (titik akhir ditentukan berdasarkan tempat yang saat ini
dipilih). Jika titik asal tidak diteruskan, rute akan dinonaktifkan. Contoh berikut menunjukkan penyetelan titik asal untuk mengaktifkan rute jalan kaki di peta:
directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},
Ukuran area pandang peta, seperti yang ditentukan berdasarkan batas peta dan tingkat zoom, secara langsung memengaruhi jarak yang dapat ditampilkan dari titik asal tertentu. Misalnya, jika area pandang ditetapkan untuk menampilkan area seluas 100 mil, lokasi menarik kemungkinan akan muncul hingga 50 mil dari titik asal. Untuk memastikan aplikasi Anda menampilkan rute jalan kaki dengan jarak yang wajar, Anda dapat:
- Menonaktifkan rute jalan kaki pada tingkat zoom yang lebih rendah (biasanya di bawah tingkat zoom 16).
- Menentukan
locationRestriction
menggunakan area batas yang lebih kecil. Dengan begitu, lokasi menarik tidak akan muncul di luar area pembatasan.
Mengubah asal rute
Anda dapat mengubah nilai properti directionsOptions
kapan saja selama siklus proses LocalContextMapView
. Contoh berikut menunjukkan penetapan nilai baru untuk directionsOptions
:
localContextMapView.directionsOptions = {
origin: {lat: 47.6532809, lng: -122.3512206},
};
atau
localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};
Menetapkan tata letak dan visibilitas
Anda dapat menetapkan posisi tata letak awal dan opsi visibilitas untuk
tampilan detail tempat dan pemilih tempat, dengan menetapkan properti placeChooserViewSetup
dan placeDetailsViewSetup
dari LocalContextMapView
. Anda juga dapat menyembunyikan tampilan detail tempat secara terprogram.
Menetapkan posisi tata letak pemilih tempat
Anda dapat menetapkan posisi tata letak pemilih tempat saat melakukan inisialisasi LocalContextMapView
. Posisi tata letak relatif terhadap arah dokumen, dan akan bervariasi tergantung pada apakah aplikasi Anda kiri-ke-kanan (LTR), atau kanan-ke-kiri (RTL).
Ada tiga opsi tata letak untuk pemilih tempat:
INLINE_START
menetapkan pemilih tempat untuk ditampilkan di AWAL alur konten (sisi kiri peta untuk LTR, di sebelah kanan untuk RTL).INLINE_END
menetapkan pemilih tempat untuk ditampilkan di AKHIR alur konten (sisi kanan peta untuk LTR, di sebelah kiri untuk RTL).BLOCK_END
menetapkan pemilih tempat untuk ditampilkan di BAWAH halaman (ini sama untuk LTR dan RTL).
Saat Anda menetapkan posisi pemilih tempat ke INLINE_START
atau INLINE_END
, Anda harus selalu menetapkan posisi tampilan detail tempat ke nilai yang sama.
Anda dapat memilih untuk menetapkan tampilan detail tempat agar ditampilkan di jendela info.
Untuk BLOCK_END
, mode tata letak tampilan detail tempat SELALU ditetapkan ke
INFO_WINDOW
.
Library Konteks Lokal secara responsif mengubah posisi pemilih tempat berdasarkan ukuran LocalContextMapView
yang dirender. Secara
default, di LocalContextMapView
yang lebih besar, pemilih tempat akan muncul di
awal alur konten (di sebelah kiri peta untuk LTR, di sebelah kanan untuk
RTL). Di LocalContextMapView
yang lebih kecil (misalnya, di perangkat seluler),
setelan default berubah untuk menampilkan pemilih tempat di bagian bawah peta, dan menampilkan detail tempat di jendela info. Tingkat zoom browser memengaruhi dimensi piksel yang membuat posisi pemilih bergeser antara sisi dan bawah (nilai minimum meningkat secara proporsional dengan tingkat zoom).
Sebaiknya gunakan panggilan fungsional untuk mengonfigurasi posisi default pemilih tempat. Mendeklarasikan nilai ini secara langsung akan mengganti perubahan tata letak yang responsif.
Menampilkan pemilih tempat di awal alur konten
Untuk menetapkan pemilih tempat agar muncul di awal alur konten (di
sebelah kiri peta untuk LTR, di sebelah kanan untuk RTL), tetapkan position
ke
INLINE_START
untuk placeChooserViewSetup
dan placeDetailsViewSetup
, seperti
yang ditunjukkan pada contoh berikut:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
});
Menampilkan pemilih tempat di akhir alur konten
Untuk menetapkan pemilih tempat agar muncul di akhir alur konten (di sebelah kanan
untuk LTR, di sebelah kiri untuk RTL), tetapkan position
ke INLINE_END
untuk
placeChooserViewSetup
dan placeDetailsViewSetup
, seperti yang ditunjukkan pada
contoh berikut:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_END'};
}
},
});
Menampilkan pemilih tempat di bagian bawah
Untuk menetapkan pemilih tempat agar ditampilkan di bagian bawah peta, tetapkan position
dari placeChooserViewSetup
ke BLOCK_END
, dan layoutMode
dari
placeDetailsViewSetup
ke INFO_WINDOW
, seperti yang ditunjukkan pada contoh berikut:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'BLOCK_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {layoutMode: 'INFO_WINDOW'};
}
},
});
Menyembunyikan pemilih tempat
Pemilih tempat terihat secara default. Untuk menyembunyikan pemilih tempat, tetapkan
layoutMode
ke HIDDEN
, seperti yang ditunjukkan dalam contoh berikut:
placeChooserViewSetup: {layoutMode: 'HIDDEN'},
Contoh berikut menampilkan penyembunyian pemilih tempat saat posisi default berubah menjadi BLOCK_END
:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
placeChooserViewSetup: ({defaultPosition}) => {
if (defaultPosition === 'BLOCK_END') {
return {layoutMode: 'HIDDEN'};
}
},
});
Menampilkan tampilan detail tempat di jendela info
Agar tampilan detail tempat ditampilkan di jendela info, tetapkan layoutMode
ke INFO_WINDOW
, seperti yang ditunjukkan dalam contoh berikut:
placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},
Anda dapat menggunakan setelan ini bersama dengan posisi pemilih tempat (kiri, kanan, atau bawah).
Menyembunyikan tampilan detail tempat secara terprogram
Anda dapat menyembunyikan tampilan detail tempat secara terprogram, dengan memanggil hidePlaceDetailsView()
pada instance LocalContextMapView
, seperti yang ditunjukkan dalam contoh berikut:
localContextMapView.hidePlaceDetailsView()
Secara default, mengklik peta akan menyembunyikan tampilan detail tempat. Anda dapat menetapkan opsi hidesOnMapClick
di placeDetailsViewSetup
ke false
untuk mencegah perilaku default ini.
// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: {hidesOnMapClick: false},
});
Untuk hanya menyembunyikan jendela info detail tempat saat peta diklik, Anda dapat mengontrol penyetelan nilai hidesOnMapClick
secara bersyarat seperti yang ditunjukkan dalam contoh berikut:
// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: ({defaultLayoutMode}) => {
return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
},
});
Menetapkan opsi Map
bagian dalam
Setelah memiliki instance LocalContextMapView
, Anda dapat menetapkan MapOptions pada instance Map
bagian dalam. Map
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
bagian dalam:
// Instantiate LocalContextMapView.
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 12,
});
// Set inner map options.
localContextMapView.map.setOptions({
center: pos,
zoom: 14,
mapTypeId: 'satellite',
});
}