Saya menggunakan Google Maps API untuk membangun peta yang penuh dengan penanda, tetapi saya ingin satu penanda menonjol dari yang lainnya. Hal yang paling sederhana untuk dilakukan, saya pikir, adalah mengubah warna marker menjadi biru, bukan merah. Apakah ini hal yang sederhana untuk dilakukan atau apakah saya harus membuat ikon yang sama sekali baru? Jika saya harus membuat ikon baru, apa cara termudah untuk melakukannya?
167
Jawaban:
Karena peta v2 sudah tidak digunakan lagi, Anda mungkin tertarik dengan peta v3: https://developers.google.com/maps/documentation/javascript/markers#simple_icons
Untuk peta v2:
http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview
Anda akan memiliki satu set logika melakukan semua pin 'biasa', dan yang lain melakukan pin 'khusus' menggunakan penanda baru yang ditentukan.
sumber
Dengan Google Maps API versi 3, cara termudah untuk melakukannya adalah dengan meraih set ikon kustom, seperti yang dibuat oleh Benjamin Keen di sini:
http://www.benjaminkeen.com/?p=105
Jika Anda meletakkan semua ikon itu di tempat yang sama dengan halaman peta Anda, Anda dapat mewarnai Marker hanya dengan menggunakan opsi ikon yang sesuai saat membuatnya:
Ini sangat mudah, dan merupakan pendekatan yang saya gunakan untuk proyek yang saya kerjakan saat ini.
sumber
MapIconMaker: perpustakaan untuk Google Maps v2
Salah satu caranya adalah dengan menggunakan
MapIconMaker(deadlink). Ada contoh disini(deadlink). Ikon default Google Maps adalah lebar 20px dan tinggi 34px, sehingga Anda dapat menggunakan sesuatu seperti ini untuk meniru:Anda bahkan dapat membungkusnya dalam beberapa fungsi untuk membuat segalanya lebih mudah pada diri Anda sendiri:
Itulah yang saya gunakan secara pribadi untuk semua marker yang saya buat. Saya lebih suka memiliki opsi untuk mengubah warna tingkah.
Pembaruan: Warna Hex dari ikon default adalah "# FE7569". Selain itu, Anda dapat mengatur Image pada Marker daripada membuat Marker baru dengan ikon baru. Jadi, jika Anda ingin fungsi yang disorot, Anda bisa menggunakan sesuatu seperti ini, menggunakan fungsi di atas:
StyledMarker: perpustakaan untuk Google Maps v3
Karena V2 digantikan oleh V3 beberapa waktu yang lalu saya pikir saya harus memperbarui jawaban ini. Saya membuat perpustakaan untuk spidol khusus yang dapat ditemukan di Perpustakaan Utilitas V3 di
sini(deadlink). Ini memungkinkan untuk berbagai warna dan bentuk, dan Anda dapat menempatkan teks pada marker juga. Ini bekerja dengan menggunakan Google Charts API yang memiliki metode untuk membuat penanda jenis Google Maps. Jangan ragu untuk melihat kode sumber jika Anda lebih suka menggunakan Google Charts API secara langsung.Hal tentang perpustakaan itu, bagaimanapun, adalah mengurus mendefinisikan daerah yang dapat diklik dari gambar penanda ini untuk Anda, jadi, misalnya, gelembung yang lebih panjang dengan teks akan memiliki daerah yang dapat diklik yang diharapkan, seperti
contoh ini(deadlink).sumber
Desain Bahan
EDITED MARET 2019 sekarang dengan warna pin terprogram,
JAVASCRIPT MURNI, TANPA GAMBAR, LABEL DUKUNGAN
tidak lagi bergantung pada API Grafik yang sudah usang
sumber
MapIconMaker
sudah usang.http
kecuali jika mengekspos sesuatu yang saya tidak sadari di headerSecara pribadi, saya pikir ikon yang dihasilkan oleh Google Charts API terlihat hebat dan mudah untuk disesuaikan secara dinamis.
Lihat jawaban saya di Google Maps API 3 - Warna marker khusus untuk marker default (titik)
sumber
Cara paling sederhana yang saya temukan adalah dengan menggunakan BitmapDescriptorFactory.defaultMarker () dokumentasi bahkan memiliki contoh pengaturan warna. Dari kode saya sendiri:
sumber
Untuk menyesuaikan marker, Anda dapat melakukannya dari alat online ini: https://materialdesignicons.com/
Dalam kasus Anda, Anda menginginkan penanda peta yang tersedia di sini: https://materialdesignicons.com/icon/map-marker dan yang dapat Anda sesuaikan secara online.
Jika Anda hanya ingin mengubah warna Merah default menjadi Biru, Anda dapat memuat ikon ini: http://maps.google.com/mapfiles/ms/icons/blue-dot.png
Ini telah disebutkan di utas ini: https://stackoverflow.com/a/32651327/6381715
sumber
Artikel yang relatif baru ini memberikan contoh sederhana dengan seperangkat ikon berwarna Google Maps.
sumber