Langsung ke konten utama

Cara Mengubah Icon Marker di Google Map Javascript

Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin.

Seperti yang telah saya singgung pada artikel saya beberapa waktu yang lalu, saat ini saya sedang mengerjakan proyek tugas akhir sebagai syarat kelulusan program D3 di Politeknik Elektronika Negeri Surabaya. Tugas Akhir saya, yaitu pendeteksi hotspot kriminalitas, berhubungan dengan sistem informasi geografis.

Dalam visualisasi data pada web-nya, saya menggunakan Google Maps API untuk Javascript. Saya menggunakannya untuk fitur input, edit, dan view data spasialnya.

Salah satu fitur pada web yang saya buat, yaitu input, mensyaratkan saya bisa menampilkan icon marker yang tidak standar. Misalnya, icon marker kantor polisi berbeda dengan icon marker pasar. Mengenai fitur ini, saat saya menulis artikel ini, adalah hal baru yang belum pernah saya lakukan sebelumnya.

Maka dari itu, saya mencari tutorial di internet untuk membuat apa yang saya inginkan bisa terwujud. Dan seperti biasa, tutorial paling mudah dipahami dan mudah ditemukan adalah dokumentasi resmi dari Google.

Saya membuat catatan ini untuk memudahkan saya melakukan langkah-langkahnya di kemudian hari tanpa googling terlebih dahulu. Syukur-syukur bisa membantu orang lain yang juga mencari informasi serupa.

Persyaratan

Untuk mengikuti langkah-langkah di bawah ini, ada beberapa kondisi yang harus dipenuhi terlebih dahulu.
  • Bisa menampilkan marker pada Google Maps Javascript. Ini karena apabila saya membuat tutorial ini dari awal, artikel ini akan panjang. Selain itu, saya juga ingin memfokuskan pada bagian 'penggantian ikon marker' di artikel ini.
  • Memiliki gambar yang akan dijadikan icon marker. Format gambar yang berhasil saya gunakan pada tutorial ini adalah *.png. Resolusi gambar yang saya gunakan adalah 32x32 px.

Langkah-langkah

Apabila kedua persyaratan di atas sudah terpenuhi, sekarang saatnya mengubah icon dengan langkah-langkah sebagai berikut.

1. Letakkan Icon dan File HTML Dalam Satu Folder

Pertama, letakkan file gambar yang akan dijadikan sebagai icon dalam folder yang sama dengan file HTML yang Anda gunakan untuk menampilkan map. Contoh tampilannya bisa Anda lihat pada Gambar 1.

Gambar 1. Letak File Gambar dan File HTML

Apabila Anda paham cara kerja file gambar pada HTML, Anda pasti tahu bahwa file gambar tersebut bisa diletakkan di mana saja, yang penting bisa diakses oleh file HTML Anda.

2. Buat Variabel Untuk Gambar yang Dijadikan Sebagai Icon

Kemudian, buka file yang berisi koding Google Maps API. Buat variabel di bawah baris kode function initMap() { untuk menunjukkan lokasi gambar yang telah ditentukan pada langkah 1. Baris kodenya akan seperti di bawah ini.

var image = 'icon.png';

Anda perlu menyesuaikan bagian yang berwarna merah pada koding di atas agar sesuai dengan nama icon yang Anda gunakan. Saya menggunakan icon.png karena memang file icon saya namanya itu (seperti yang bisa Anda lihat pada langkah 1). Tampilannya akan seperti di bawah ini.

Gambar 2. Penambahan Variabel Untuk Icon Marker

Apabila Anda paham dasar-dasar javascript, tentu Anda juga tahu bahwa image bisa diganti sesuai dengan kebutuhan koding Anda. Tentunya dengan menyesuaikan langkah berikutnya pada tutorial ini.

3. Tambahkan Baris Kode Untuk Menampilkan Icon Custom

Langkah selanjutnya, tambahkan baris kode di dalam pembuatan obyek marker untuk menampilkan icon sesuai dengan yang telah Anda tentukan. Pembuatan obyek marker memiliki ciri-ciri memiliki bagian new google.maps.Marker({. Masukkan potongan koding berikut pada akhir pembuatan obyek tersebut sebelum });.

icon: image

Contoh tampilan pada editor kode Anda adalah seperti di bawah ini.

Gambar 3. Penambahan Properti Untuk Memodifikasi Icon Marker

Catatan: Jangan lupa memberi tanda koma sebelum Anda menambahkan baris kode baru pada pembuatan obyek tersebut. Apabila Anda tidak melakukannya, bisa-bisa marker tersebut tidak akan tampil.

Gambar 4. Tanda Koma yang Harus Diperhatikan

Simpan file Anda (Ctrl+S).

4. Cek di Browser

Buka file HTML yang selesai Anda modifikasi sesuai langkah-langkah di atas. Anda akan menemui tampilan seperti di bawah ini.

Gambar 5. Tampilan Custom Marker di Google Maps Javascript API

Apabila icon sudah berhasil muncul, berarti langkah-langkah yang Anda ikuti sudah benar. Apabila ada yang dibingungkan, silahkan menanyakannya pada kolom komentar.

Penutup

Setelah mengikuti tutorial kali ini, Anda tentu sudah paham cara mengubah icon marker pada Google Maps Javascript API. Semoga bermanfaat bagi kita semua.

Wallahul muwafiq ilaa aqwamith thooriq.

Referensi

  1. https://developers.google.com/maps/documentation/javascript/markers?hl=id#simple_icons
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Update dari Composer 1 ke Composer 2 di Ubuntu 20.04

Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Apakah Anda selalu sebal ketika menjalankan composer install atau composer update karena kecepatannya sangat lambat? Jika iya, berarti kita mengalami hal yang sama. Saya juga mengalami hal tersebut. Saya selalu mengalaminya saat menggunakan Composer versi 1. Dalam pengumumannya pada 24 Oktober 2020, Composer mengumumkan bahwa mereka telah merilis Composer versi 2. Hal yang paling menarik perhatian saya tentu saja pada peningkatan performanya. Anda bisa melihatnya di sini . Gila. itu cepet banget, sih, menurut saya. Tentu, saya tertarik meng- upgrade versi Composer saya agar bisa menikmati kecepatan tersebut. Ingat, ngoding itu membutuhkan waktu yang lama. Cukup ngoding yang lama, composer install jangan.   Sebenarnya, saya sudah menemukan cara meng- upgrade Composer 1 ke Composer 2 di sistem yang saya gunakan, Ubuntu 20.04 di sini . Namun, saya ingin menuliskannya lagi
2 komentar
Baca selengkapnya

Cara Mengatasi "Access denied for user 'root'@'localhost' (mysqli_real_connect(): (HY000/1698))" di Ubuntu 20.04 LTS

Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Apakah Anda selalu menjumpai error tersebut ketika melakukan update di Ubuntu Anda? Jika iya, berarti kita mengalami hal yang sama. Saya juga selalu mengalami hal tersebut setiap selesai menjalankan sudo apt upgrade . Well . Sebenarnya tidak selalu. Mungkin lebih tepatnya adalah ketika sistem melakukan update pada MySQL-nya. So , pada artikel kali ini saya menunjukkan cara yang saya lakukan untuk mengatasi error tersebut. Ohiya. Sebenarnya, saya sudah lama menemui error ini dan sudah mengatasinya berulang kali dengan membuka kembali link ke StackOverflow yang pernah saya ceritakan pada artikel terdahulu . Lalu, mengapa saya menulis ini? Agar saya lebih mudah saja melakukannya secara terstruktur tanpa harus klik dan scroll-scroll jawaban di StackOverflow tadi. Baiklah, mari kita mulai saja. Langkah-langkah Mengatasinya Pertama, buka terminal . Buka mysql sebagai root
Posting Komentar
Baca selengkapnya

Download Gratis Modul Konsep Jaringan - 802.11

Bismillahirrohmaaniirrohiim. Alhamdulillahi Robbil ‘Alamiin. Pada artikel sebelumnya, saya telah mengabarkan bahwa saya mendapatkan tugas menerjemahkan modul konsep jaringan . Kegiatan mulia tersebut saya lakukan karena saya meninggalkan satu huruf A pada absensi saya. Selengkapnya, baca di sini . Ternyata, dalam satu malam, saya telah menyelesaikannya. Dengan izin Allah Yang Maha Kuasa tentunya. :-D Besoknya, saya cetak modul tersebut, lalu saya kumpulkan. Saya termasuk orang yang hampir terakhir mengumpulkannya karena hanya ada satu orang setelah saya yang ikut mengumpulkan pada hari itu. Dan alhamdulillah , kerjaan saya langsung diterima hari itu juga. Dan lagi, dengan hampir tanpa revisi.
Posting Komentar
Baca selengkapnya