Cara mengubah warna penanda Google Maps dengan JavaScript

Buat mereka merah muda, biru, hijau, kuning atau ungu!

Secara default, penanda Google Maps berwarna merah. Artikel ini akan menunjukkan cara menambahkan penanda warna yang berbeda ke Google Maps. Jadi, mari kita mulai. ?

1. Muat Google Maps

Buat file HTML yang memuat Google Maps dengan mengikuti dokumen resmi Google Maps API: Hello World.

Kode Anda akan terlihat seperti cuplikan kode di bawah ini.

Catatan: Ingatlah untuk mengubah YOUR_API_KEYke kunci Google Maps API Anda yang sebenarnya.

2. Tambahkan penanda warna yang berbeda

Untuk menambahkan penanda warna biru, kita perlu mengubah ikon penanda. Ini dilakukan dengan menambahkan properti ikon dan menentukan URL untuk itu seperti di bawah ini.

icon: { url: "//maps.google.com/mapfiles/ms/icons/blue-dot.png" }

Perhatikan bahwa kami menentukan blue-dot.pngdi akhir URL untuk mendapatkan penanda biru. Untuk menambahkan penanda hijau cukup ubah menjadi green-dot.pngsehingga URL akan menjadi //maps.google.com/mapfiles/ms/icons/green-dot.png.

Beberapa warna lain tersedia:

  1. Merah Jambu: pink-dot.png
  2. kuning: yellow-dot.png
  3. ungu: purple-dot.png

Untuk mendapatkan URL dari lebih banyak ikon penanda, silakan merujuk ke situs web ini.

3. Bungkus ke dalam menambahkan fungsi penanda

Untuk membuat kode lebih bersih, kita bisa mendefinisikan addMarkerfungsi yang mengambil latLngdan colordari marker. Perhatikan bahwa kita menyimpan penanda yang ditambahkan di global markersArrayjika kita perlu melakukan operasi pada penanda nanti.

Buka file HTML di browser. Ini akan terlihat seperti ini:

Anda bisa mendapatkan versi terakhir kode dari sini. Tolong beri tahu saya bagaimana kelanjutannya di komentar di bawah.

Silakan lihat tutorial Google Maps lain yang telah saya tulis:

Terapkan klik pada JavaScript Google Map untuk menambahkan penanda yang bisa diseret dengan polyline