Ikon Tempat

Ikon tempat menunjukkan berbagai jenis tempat (misalnya kedai kopi, perpustakaan, dan museum). Anda dapat meminta ikon dan warna latar belakangnya menggunakan Class Tempat atau Layanan Places.

Kolom

Gunakan kolom berikut untuk menggunakan ikon tempat:

• icon menampilkan URL untuk ikon PNG berwarna dengan ukuran 71x71 piksel (hanya Layanan Places).
• iconBackgroundColor and icon_background_color menampilkan kode warna HEX default untuk kategori ikon tempat.
• icon_mask_base_uri (Layanan Places) menampilkan URL dasar untuk ikon tidak berwarna, tanpa ekstensi jenis file (tambahkan .svg atau .png).
• svgIconMaskURI (Class Tempat) menampilkan URL dasar untuk ikon SVG tidak berwarna.

Menerapkan ikon dan warna tempat ke penanda

Dengan Place Details, Anda dapat meminta ikon tempat dan warna latar belakang, yang dapat diterapkan ke penanda. Contoh berikut menampilkan kode untuk membuat penanda menggunakan data tempat dengan meneruskan place.iconBackgroundColor ke PinElement.background, dan place.svgIconMaskURI ke PinElement.glyph. Gunakan place.location untuk menempatkan penanda di lokasi yang benar. Contoh ini juga menampilkan place.displayName dalam judul penanda.

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
    id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] });

const pinElement = new PinElement({
    background: place.iconBackgroundColor,
    glyph: new URL(String(place.svgIconMaskURI)),
});

const placeIconMarkerView = new AdvancedMarkerElement({
    map,
    position: place.location,
    content: pinElement.element,
    title: place.displayName,
});
index.ts

// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
  id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({
  fields: [
    "location",
    "displayName",
    "svgIconMaskURI",
    "iconBackgroundColor",
  ],
});

const pinElement = new PinElement({
  background: place.iconBackgroundColor,
  glyph: new URL(String(place.svgIconMaskURI)),
});
const placeIconMarkerView = new AdvancedMarkerElement({
  map,
  position: place.location,
  content: pinElement.element,
  title: place.displayName,
});
index.js

Permintaan warna ikon dan latar belakang tempat

Tabel berikut menampilkan semua ikon tempat yang tersedia menurut kategori. Secara default, ikon tempat ini ditampilkan dengan glyph hitam. Warna latar belakang ikon ditentukan berdasarkan kategori tempat.

Kategori tempat: Makanan dan minuman (warna latar belakang ikon #FF9E67)
Bar, Klub malam	Kafe	Restoran, Toko Roti
Kategori tempat: Retail (warna latar belakang ikon #4B96F3)
Buku, Pakaian, Elektronik, Perhiasan, Sepatu, Pusat Perbelanjaan/Mall	Minimarket	Toko Bahan Makanan, Supermarket	Apotek
Kategori tempat: Layanan (warna latar belakang ikon #909CE1)
ATM	Bank	SPBU	Penginapan
Kantor pos
Kategori tempat: Hiburan (warna latar belakang ikon #13B5C7)
Akuarium, Wisatawan	Golf	Bersejarah	Film
Museum	Teater
Kategori tempat: Transportasi (warna latar belakang ikon #10BDFF)
Bandara	Bus, transportasi online, taksi	Kereta/Transportasi Rel
Kategori tempat: Kota/generik/agama (warna latar belakang ikon #7B9EB0)
Pemakaman	Bangunan sipil	Perpustakaan	Monumen
Parkir	Sekolah (dasar, menengah, universitas)	Ibadah (Kristen)
Ibadah (Hindu)	Ibadah (Islam)	Ibadah (Jain)	Ibadah (Yahudi)
Ibadah (Sikh)	Bisnis generik
Kategori tempat: Luar Ruangan (warna latar belakang ikon #4DB546)
Naik perahu	Berkemah	Taman	Stadion
Kebun binatang
Kategori tempat: Darurat (warna latar belakang ikon #F88181)
Rumah Sakit	Polisi