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

Komentar

Posting Komentar

Postingan populer dari blog ini

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

Gambar
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 ...
Baca selengkapnya

Cara Memilih Database MySQL Aktif via Terminal Ubuntu 22.04

Gambar
  Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Singkatnya, kita bisa menggunakan command USE nama_database; . Tapi, saya perlu menambahkan konteks di sini. Berikut konteksnya. Konteks Sebelumnya, saya telah menulis cara membuat dan menampilkan semua database di Terminal Ubuntu 22.04. Tentu saja kita tidak hanya bisa melakukan dua hal tersebut. Kita bisa menambahkan data, memperbarui, dan menghapus data dalam suatu database . Namun, sebelum melakukan hal tersebut, kita perlu memilih dulu database yang akan kita kelola. Mengapa? Karena jika kita langsung coba melakukan suatu operasi dalam database sementara belum ada database yang kita pilih, MySQL akan menolak. Misal, kita ingin menampilkan seluruh tabel yang ada dalam database seperti tampilan di bawah. MySQL akan menolak. Karena itu, kita perlu terlebih dahulu memilih database yang ingin kita kelola. Hal pertama yang perlu kita lakukan tentu saja membuka Comman...
Baca selengkapnya

Cara Install DBeaver Up-To-Date di Ubuntu 22.04

Gambar
  Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Singkatnya, kita bisa menggunakan command sudo apt install dbeaver-ce . Tapi, tentu kita perlu melakukan beberapa hal terlebih dahulu. Mengenal DBeaver DBeaver merupakan aplikasi yang bisa kita gunakan untuk mengelola berbagai macam database . Kita bisa melakukan hal-hal yang biasanya bisa kita lakukan di phpMyAdmin, pgSQL, dan lain sebagainya. Hal yang sangat menarik dari aplikasi ini adalah dia bisa kita gunakan untuk berbagai macam jenis DBMS. Misalnya, kita bisa menyambungkannya dengan MySQL , MariaDB , PostgreSQL , SQL Server , SQLite , dan lain sebagainya. Anda bisa membaca selengkapnya pada website resminya di sini . Hal menarik lainnya adalah dia cross-platform . DBeaver bisa kita gunakan di Ubuntu, Windows, bahkan MacOS. Tentu pada artikel kali ini, kita akan fokus membahas instalasi di Ubuntu. Saya Sudah Mencobanya, Tetapi Tidak Berhasil Apabila Anda langsung ...
Baca selengkapnya