Penyesuaian penanda dasar

Penanda lanjutan menggunakan dua class untuk menentukan penanda: Class AdvancedMarkerElement menyediakan parameter dasar (position, title, dan map), serta class PinElement berisi opsi untuk dan penyesuaian. Cuplikan berikut menunjukkan kode untuk membuat PinElement baru, lalu menerapkannya ke penanda.

// Create a pin element.
const pin = new PinElement({
    scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pin.element,
});

Pada peta yang dibuat menggunakan HTML, parameter dasar untuk penanda dideklarasikan menggunakan elemen HTML gmp-advanced-marker; penyesuaian apa pun yang menggunakan Class PinElement harus diterapkan secara terprogram. Untuk melakukannya, kode Anda harus mengambil elemen gmp-advanced-marker dari halaman HTML. Hal berikut cuplikan menunjukkan kode untuk meminta kueri kumpulan elemen gmp-advanced-marker, lalu mengulangi hasil untuk menerapkan penyesuaian yang dideklarasikan dalam PinElement.

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.appendChild(pin.element);
}

Halaman ini menampilkan cara menyesuaikan penanda dengan cara berikut:

• Menambahkan teks judul
• Menskalakan penanda
• Mengubah warna latar belakang
• Mengubah warna batas
• Mengubah warna glyph
• Menggunakan teks dalam glyph
• Menyembunyikan glyph

Menambahkan teks judul

Teks judul muncul saat kursor diarahkan ke penanda. Teks judul dapat dibaca oleh pembaca layar.

Untuk menambahkan teks judul secara terprogram, gunakan AdvancedMarkerElement.title opsi:

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js

Untuk menambahkan teks judul ke penanda yang dibuat menggunakan HTML, gunakan atribut title:

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

Menskalakan penanda

Untuk menskalakan penanda, gunakan opsi scale.

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js

Mengubah warna latar belakang

Gunakan opsi PinElement.background untuk mengubah warna latar belakang penanda:

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts

// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js

Mengubah warna batas

Gunakan opsi PinElement.borderColor untuk mengubah warna batas penanda:

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.035 },
    content: pinBorder.element,
});
index.ts

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
  content: pinBorder.element,
});
index.js

Mengubah warna glyph

Gunakan opsi PinElement.glyphColor untuk mengubah warna glyph penanda:

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.025 },
    content: pinGlyph.element,
});
index.ts

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
  content: pinGlyph.element,
});
index.js

Menambahkan teks ke glyph

Menggunakan opsi PinElement.glyph untuk mengganti glyph default dengan teks karakter. Gif teks dari PinElement diskalakan dengan PinElement dan warna defaultnya cocok dengan glyphColor default dari PinElement.

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
});
index.ts

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerViewGlyphText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
  content: pinTextGlyph.element,
});
index.js

Menyembunyikan glyph

Tetapkan opsi PinElement.glyph ke string kosong untuk menyembunyikan glyph penanda:

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.005 },
    content: pinNoGlyph.element,
});
index.ts

// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.005 },
  content: pinNoGlyph.element,
});
index.js

Atau, tetapkan PinElement.glyphColor ke nilai yang sama dengan PinElement.background. Tindakan ini memiliki efek menyembunyikan glyph secara visual.

Langkah berikutnya:

• Membuat penanda dengan grafik