Advanced Markers

Class AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

Menampilkan posisi di peta. Perhatikan bahwa position harus ditetapkan agar AdvancedMarkerElement ditampilkan.

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>
 
const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
AdvancedMarkerElement
AdvancedMarkerElement([options])
Parameter:
Membuat AdvancedMarkerElement dengan opsi yang ditentukan. Jika peta ditentukan, AdvancedMarkerElement akan ditambahkan ke peta setelah konstruksi.
anchorLeft
attr: anchor-left
Jenis: string optional
Default: "-50%"
Nilai persentase panjang CSS yang digunakan untuk mengimbangi titik anchor penanda dari sudut kiri atas penanda. Hal ini berguna saat menggunakan visual yang memiliki titik anchor yang berbeda dengan titik tengah bawah standar penanda default.
Atribut HTML: anchor-left="string"
anchorTop
attr: anchor-top
Jenis: string optional
Default: "-100%"
Nilai persentase panjang CSS yang digunakan untuk mengimbangi titik anchor penanda dari sudut kiri atas penanda. Hal ini berguna saat menggunakan visual yang memiliki titik anchor yang berbeda dengan titik tengah bawah standar penanda default.
Atribut HTML: anchor-top="string"
collisionBehavior
Jenis: CollisionBehavior optional
Lihat AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable
attr: gmp-clickable
Jenis: boolean optional
Lihat AdvancedMarkerElementOptions.gmpClickable.
Atribut HTML: gmp-clickable
gmpDraggable
Jenis: boolean optional
Lihat AdvancedMarkerElementOptions.gmpDraggable.
map
Jenis: Map optional
Lihat AdvancedMarkerElementOptions.map.
position
attr: position
Lihat AdvancedMarkerElementOptions.position.
Atribut HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
title
attr: title
Jenis: string
Lihat AdvancedMarkerElementOptions.title.
Atribut HTML: title="string"
zIndex
Jenis: number optional
Lihat AdvancedMarkerElementOptions.zIndex.
element
readonly
Kolom ini bersifat hanya baca. Elemen DOM yang mendukung tampilan.
content
Jenis: Node optional
Lihat AdvancedMarkerElementOptions.content.
addListener
addListener(eventName, handler)
Parameter:
  • eventName: string Peristiwa yang diamati.
  • handler: Fungsi Function untuk menangani peristiwa.
Nilai Hasil: MapsEventListener Pemroses peristiwa yang dihasilkan.
Menambahkan fungsi pemroses yang diberikan ke nama peristiwa yang diberikan dalam sistem Peristiwa Maps.
Diwarisi: addEventListener, removeEventListener
click
function(event)
Argumen:
Peristiwa ini diaktifkan saat elemen AdvancedMarkerElement diklik.

Tidak tersedia dengan addEventListener() (gunakan gmp-click sebagai gantinya).
drag
function(event)
Argumen:
Peristiwa ini diaktifkan berulang kali saat pengguna menarik AdvancedMarkerElement.

Tidak tersedia dengan addEventListener().
dragend
function(event)
Argumen:
Peristiwa ini diaktifkan saat pengguna berhenti menarik AdvancedMarkerElement.

Tidak tersedia dengan addEventListener().
dragstart
function(event)
Argumen:
Peristiwa ini diaktifkan saat pengguna mulai menarik AdvancedMarkerElement.

Tidak tersedia dengan addEventListener().
gmp-click
function(event)
Argumen:
Peristiwa ini diaktifkan saat elemen AdvancedMarkerElement diklik. Paling cocok digunakan dengan addEventListener() (bukan addListener()).

Antarmuka AdvancedMarkerElementOptions

Antarmuka google.maps.marker.AdvancedMarkerElementOptions

Opsi untuk membuat AdvancedMarkerElement.
anchorLeft
opsional
Jenis: string optional
Default: "-50%"
Nilai persentase panjang CSS yang digunakan untuk mengimbangi titik anchor penanda dari sudut kiri atas penanda. Hal ini berguna saat menggunakan visual yang memiliki titik anchor yang berbeda dengan titik tengah bawah standar penanda default.
anchorTop
opsional
Jenis: string optional
Default: "-100%"
Nilai persentase panjang CSS yang digunakan untuk mengimbangi titik anchor penanda dari sudut kiri atas penanda. Hal ini berguna saat menggunakan visual yang memiliki titik anchor yang berbeda dengan titik tengah bawah standar penanda default.
collisionBehavior
opsional
Jenis: CollisionBehavior optional
Enumerasi yang menentukan perilaku AdvancedMarkerElement saat tumpang-tindih dengan AdvancedMarkerElement lain atau dengan label peta dasar di peta vektor.

Catatan: Konflik AdvancedMarkerElement dengan AdvancedMarkerElement berfungsi di peta raster dan vektor, tetapi konflik AdvancedMarkerElement dengan label peta dasar hanya berfungsi di peta vektor.
content
opsional
Jenis: Node optional
Default: PinElement
Elemen DOM yang mendukung visual AdvancedMarkerElement.

Catatan: AdvancedMarkerElement tidak meng-clone elemen DOM yang diteruskan. Setelah elemen DOM diteruskan ke AdvancedMarkerElement, meneruskan elemen DOM yang sama ke AdvancedMarkerElement lain akan memindahkan elemen DOM dan menyebabkan AdvancedMarkerElement sebelumnya terlihat kosong.
gmpClickable
opsional
Jenis: boolean optional
Default: false
Jika true, AdvancedMarkerElement akan dapat diklik dan memicu peristiwa gmp-click, serta akan bersifat interaktif untuk tujuan aksesibilitas (misalnya, memungkinkan navigasi keyboard melalui tombol panah).
gmpDraggable
opsional
Jenis: boolean optional
Default: false
Jika true, AdvancedMarkerElement dapat ditarik.

Catatan: AdvancedMarkerElement dengan ketinggian tidak dapat ditarik.
map
opsional
Jenis: Map optional
Peta tempat menampilkan AdvancedMarkerElement. Peta diperlukan untuk menampilkan AdvancedMarkerElement dan dapat disediakan dengan menetapkan AdvancedMarkerElement.map jika tidak disediakan saat konstruksi.
position
opsional
Menetapkan posisi AdvancedMarkerElement. AdvancedMarkerElement dapat dibuat tanpa posisi, tetapi tidak akan ditampilkan hingga posisinya diberikan - misalnya, oleh tindakan atau pilihan pengguna. Posisi AdvancedMarkerElement dapat diberikan dengan menetapkan AdvancedMarkerElement.position jika tidak diberikan saat pembuatan.

Catatan: AdvancedMarkerElement dengan ketinggian hanya didukung pada peta vektor.
title
opsional
Jenis: string optional
Teks rollover. Jika disediakan, teks aksesibilitas (misalnya, untuk digunakan dengan pembaca layar) akan ditambahkan ke AdvancedMarkerElement dengan nilai yang diberikan.
zIndex
opsional
Jenis: number optional
Semua AdvancedMarkerElement ditampilkan di peta menurut urutan zIndex, dengan nilai yang lebih tinggi akan ditampilkan di depan AdvancedMarkerElement yang nilainya lebih rendah. Secara default, AdvancedMarkerElement ditampilkan sesuai dengan posisi vertikalnya di layar, dengan AdvancedMarkerElement yang lebih rendah muncul di depan AdvancedMarkerElement yang lebih tinggi di layar. Mencampur penanda dengan zIndex eksplisit dan penanda tanpa dapat menyebabkan hasil visual yang tidak diharapkan. Untuk memastikan perilaku yang dapat diprediksi, sebaiknya tetapkan zIndex untuk semua penanda atau biarkan tidak ditetapkan. Perhatikan bahwa zIndex juga digunakan untuk membantu menentukan prioritas relatif di antara beberapa Penanda Lanjutan CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY. Nilai zIndex yang lebih tinggi menunjukkan prioritas yang lebih tinggi.

Class AdvancedMarkerClickEvent

google.maps.marker.AdvancedMarkerClickEvent class
extends Event
library "marker"

Peristiwa ini dibuat dengan mengklik Penanda Lanjutan. Akses posisi penanda dengan event.target.position.

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

Class PinElement

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

PinElement mewakili elemen DOM yang terdiri dari bentuk dan glyph. Bentuknya memiliki gaya balon yang sama seperti yang terlihat di AdvancedMarkerElement atau Marker3DElement default. Glyph adalah elemen DOM opsional yang ditampilkan dalam bentuk balon. PinElement mungkin memiliki rasio aspek yang berbeda bergantung pada PinElement.scale-nya.

const {PinElement} = await google.maps.importLibrary("marker");
PinElement
PinElement([options])
Parameter:
background
Jenis: string optional
Warna latar belakang bentuk pin. Lihat PinElementOptions.background.
borderColor
Jenis: string optional
Warna batas bentuk pin. Lihat PinElementOptions.borderColor.
glyphColor
Jenis: string optional
Warna glyph pin. Lihat PinElementOptions.glyphColor.
glyphSrc
Jenis: URL|string optional
Sumber gambar glyph yang akan ditampilkan di pin. Lihat PinElementOptions.glyphSrc.
glyphText
Jenis: string optional
Teks yang ditampilkan di pin. Lihat PinElementOptions.glyphText.
scale
Jenis: number optional
Lihat PinElementOptions.scale.
element
readonly
Kolom ini bersifat hanya baca. Elemen DOM yang mendukung tampilan.
glyph
Jenis: string|Element|URL optional
Lihat PinElementOptions.glyph.
Diwarisi: addEventListener, removeEventListener

Antarmuka PinElementOptions

Antarmuka google.maps.marker.PinElementOptions

Opsi untuk membuat PinElement.
background
opsional
Jenis: string optional
Warna latar belakang bentuk pin. Mendukung nilai warna CSS apa pun.
borderColor
opsional
Jenis: string optional
Warna batas bentuk pin. Mendukung nilai warna CSS apa pun.
glyph
opsional
Jenis: string|Element|URL optional
Elemen DOM yang ditampilkan di pin.
glyphColor
opsional
Jenis: string optional
Warna glyph. Mendukung nilai warna CSS apa pun.
glyphSrc
opsional
Jenis: URL|string optional
Sumber gambar glyph yang akan ditampilkan di pin.
glyphText
opsional
Jenis: string optional
Teks yang ditampilkan di pin.
scale
opsional
Jenis: number optional
Default: 1
Skala pin.