Dengan penanda lanjutan, Anda dapat membuat dan menyesuaikan penanda yang berperforma tinggi. Sesuaikan latar belakang, batas, dan warna glyph penanda default, sesuaikan ukuran penanda, dan ganti ikon penanda default dengan gambar grafis kustom. Anda dapat membuat penanda yang dapat diakses yang merespons peristiwa klik DOM dan input keyboard. Untuk penyesuaian yang lebih mendalam, penanda lanjutan mendukung penggunaan HTML dan CSS kustom, termasuk kemampuan untuk membuat penanda kustom. Untuk aplikasi 3D, Anda dapat mengontrol ketinggian tempat penanda muncul. Penanda lanjutan didukung pada peta raster dan vektor (ID peta diperlukan).
Mulai menggunakan penanda lanjutan
Menyesuaikan warna, skala, dan gambar ikon
Sesuaikan latar belakang, glyph, dan warna batas penanda default, serta sesuaikan ukuran penanda.
Ganti ikon penanda default dengan gambar SVG atau PNG kustom.
Membuat penanda HTML kustom
Gunakan HTML dan CSS kustom untuk membuat penanda interaktif yang unik secara visual, dan membuat animasi.
Membuat penanda merespons peristiwa klik dan keyboard
Buat penanda merespons klik dan peristiwa keyboard dengan menambahkan
pemroses peristiwa click.
function initMap() {
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.4239163, lng: -122.0947209},
zoom: 17,
mapId: 'DEMO_MAP_ID',
});
const marker = new google.maps.marker.AdvancedMarkerElement({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
marker.addListener('click', ({domEvent, latLng}) => {
const {target} = domEvent;
// Handle the click event.
// ...
});
}
Menetapkan ketinggian penanda dan perilaku saat tumpang tindih
Tetapkan ketinggian untuk penanda agar muncul dengan benar bersama elemen peta 3D, dan tentukan perilaku penanda saat terjadi tumpang tindih dengan penanda atau label peta lainnya. Ketinggian penanda hanya didukung pada peta vektor.
