Bagian ini menunjukkan cara menyesuaikan tampilan visual peta
LocalContextMapView
dengan menerapkan gaya peta kustom dan menyesuaikan tampilan ikon penanda peta.
Menerapkan gaya peta kustom
Anda dapat menyesuaikan tampilan visual peta LocalContextMapView
dengan menerapkan gaya kustom. Namun, perhatikan bahwa LocalContextMapView
memiliki gaya default yang berbeda dengan Map
standar.
Untuk sepenuhnya mengganti gaya default LocalContextMapView
dengan gaya kustom (styles
menyimpan array gaya kustom):
// Set the styles in map options.
localContextMapView.map.setOptions({
styles,
});
Untuk menimpa gaya default LocalContextMapView
dengan gaya kustom
(styles
):
TypeScript
// Merge map styles. const mergedStyles = map.get("styles").concat(styles); map.setOptions({ center: center, zoom: 14, styles: mergedStyles, });
JavaScript
// Merge map styles. const mergedStyles = map.get("styles").concat(styles); map.setOptions({ center: center, zoom: 14, styles: mergedStyles, });
Menyesuaikan ikon penanda
Anda dapat menetapkan tampilan visual ikon penanda dengan menyesuaikan warna pin, warna glyph, dan skala (ukuran). Lakukan hal ini saat melakukan inisialisasi
LocalContextMapView
. Anda dapat menetapkan nilai ini ke objek statis (gaya ikon tidak berubah sesuai status), atau fungsi dinamis (gaya ikon berubah saat ikon ditandai atau dipilih).
- Gaya kustom digabungkan dengan gaya default.
- Semua sintaksis warna CSS didukung termasuk kata kunci RGB, heksadesimal, HSL, dan warna.
- Skala adalah nilai numerik, dengan skala 2 dua kali lebih besar dari skala 1, dan seterusnya. Secara default, pin memiliki nilai skala berbeda yang ditetapkan untuk status yang berbeda. Skala bersifat mutlak, jadi nilai yang Anda teruskan tidak akan mengubah ukuran pin secara relatif terhadap nilai default, melainkan mengganti default. Misalnya, menetapkan skala ke 1 untuk semua status akan membuat pin berukuran sama, terlepas dari statusnya.
Menetapkan warna dan skala ikon penanda secara statis
Anda dapat menetapkan warna serta skala default untuk ikon penanda dan glyph. Untuk melakukannya,
tentukan nilai warna untuk glyphColor
dan background
, serta nilai numerik untuk
scale
di pinOptionsSetup
. Contoh berikut menetapkan ikon ke hitam,
glyph ke putih, dan meningkatkan skala menjadi 2:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 12,
pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
});
Menetapkan warna dan skala ikon penanda secara dinamis
Untuk menetapkan warna default untuk ikon dan glyph penanda berdasarkan status (default, ditandai, atau dipilih), gunakan pernyataan bersyarat untuk menetapkan nilai yang diinginkan bagi setiap status. Saat pengguna mengarahkan mouse ke penanda, isHighlighted
menjadi
true
. Saat pengguna mengklik penanda, isSelected
akan menjadi true (benar). Saat tampilan detail tempat ditutup, ikon penanda akan kembali ke gaya visual default. Contoh berikut menunjukkan perubahan gaya ikon penanda berdasarkan status:
pinOptionsSetup: ({isSelected, isHighlighted}) => {
if (isHighlighted) {
return {glyphColor: 'white', background: '#990000', scale: 1.5};
}
if (isSelected) {
return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
}
},
Menggunakan gaya visual peta berbasis Cloud dengan Konteks Lokal versi Beta
Untuk menggunakan gaya visual peta berbasis Cloud bersama dengan Konteks Lokal versi Beta, lakukan langkah-langkah berikut:
- Membuat
Map
denganmapId
dan meneruskan keLocalContextMapView
- Menonaktifkan label dan ikon untuk lokasi menarik (POI) generik.
- Menonaktifkan beberapa elemen di opsi
Map
bagian dalam. Langkah-langkah ini bersifat opsional.
Membuat Map
dengan mapId
dan meneruskan ke LocalContextMapView
Untuk menambahkan peta menggunakan ID gaya visual peta berbasis Cloud, tentukan elemen map
(termasuk ID dan semua opsi Map
bagian dalam), dan gunakan hal ini untuk melakukan inisialisasi LocalContextMapView
, seperti yang ditunjukkan pada contoh berikut:
function initMap() {
const mapWithId = new google.maps.Map(document.createElement('div'),
{center: {lat: 37.7749, lng: -122},
zoom: 10,
mapId: 'YOUR_MAP_ID_HERE'});
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector("#map"),
placeTypePreferences: ["restaurant", "bar"],
map: mapWithId,
maxPlaceCount: 12,
});
};
Menonaktifkan label dan ikon untuk POI generik
Guna menonaktifkan label dan ikon untuk POI generik, lakukan langkah-langkah berikut:
- Kunjungi Konsol Google Cloud, lalu pilih Map Styles untuk membuka layar Map Styles.
- Dalam konfigurasi gaya untuk Points of interest, tetapkan Visibility ke Off untuk Labels dan Icons.
- Dalam konfigurasi gaya untuk Points of interest, tetapkan Visibility ke On untuk Park Labels.
Menetapkan opsi Map
bagian dalam (opsional)
Selain opsi Map
bagian dalam lainnya yang telah ditetapkan, Anda juga dapat menetapkan opsi Map
bagian dalam berikut seperti yang ditunjukkan di sini:
localContextMapView.map.setOptions({
// ...
clickableIcons: false,
});