Menetapkan Opsi Konteks Lokal dan Peta

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 layoutModeke 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',
  });
}