Bagaimana saya bisa mengubah warna penanda Google Maps?

167

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?

kasar
sumber
2
Anda mungkin ingin memeriksa pos ini dari kemarin: stackoverflow.com/questions/2467720/…
Daniel Vassallo
atau mungkin posting yang lebih baik stackoverflow.com/questions/7095574/…
Faizan

Jawaban:

45

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.

Kevin
sumber
24
Catatan untuk pembaca mendatang: Ini untuk Google Maps API v2 yang sudah usang. Jika Anda menggunakan v3, maka Anda perlu mencari di tempat lain.
priestc
12
Saya mengklik tautan pertama, ctrl-f untuk 'warna': tidak ada hasil. Akan lebih baik untuk menambahkan lebih banyak detail pada jawaban untuk benar-benar menjawab pertanyaan. OP secara khusus menanyakan apakah mungkin untuk mengubah warna tanpa membuat ikon baru.
qwertzguy
125

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:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

Ini sangat mudah, dan merupakan pendekatan yang saya gunakan untuk proyek yang saya kerjakan saat ini.

Sean McMains
sumber
6
Jawaban ini luar biasa. Saya sedih bahwa jawaban yang diterima adalah untuk V2, tetapi untungnya scroll down terbayar. Terima kasih!
Adam Tuttle
Saya membuat versi yang tidak bergantung pada gambar: stackoverflow.com/a/23163930/1689770
Jonathan
49

MapIconMaker: perpustakaan untuk Google Maps v2

Salah satu caranya adalah dengan menggunakan MapIconMaker (deadlink). Ada contoh di sini (deadlink). Ikon default Google Maps adalah lebar 20px dan tinggi 34px, sehingga Anda dapat menggunakan sesuatu seperti ini untuk meniru:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

Anda bahkan dapat membungkusnya dalam beberapa fungsi untuk membuat segalanya lebih mudah pada diri Anda sendiri:

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

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:

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

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).

Bob
sumber
3
Tampaknya ini hanya kompatibel dengan GMaps API v2?
Tigraine
7
@Tigraine Saya benar-benar membuat perpustakaan yang sama sekali baru untuk digunakan untuk v3 yang disebut "StyledMarker" yang dapat ditemukan di Perpustakaan Utilitas v3: code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Bob
lihat jawaban Sean McMains untuk v3
smp7d
@ Matt Awalnya, ya, itu hanya v2. Saya telah memperbarui untuk memasukkan solusi v3
Bob
FYI, "setImage" bukan fungsi pasar di Google Maps API v3. "setIcon" adalah fungsi yang benar untuk digunakan.
Nick Bork
39

masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini 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

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });
Jonathan
sumber
2
Sayangnya, fitur ini sudah usang seperti yang Anda lihat di sini . Ini adalah situasi yang mengecewakan, di mana ini sudah usang dan versi sebelumnya yang saya gunakan, MapIconMakersudah usang.
zerowords
Perhatikan bahwa ini tidak berfungsi dengan https, hanya http. Kekecewaan!
JoeGalind
@ JoGalind adakah alasan enkripsi diperlukan saat mengambil warna? Maksud saya, saya tidak melihat risiko keamanan untuk digunakan httpkecuali jika mengekspos sesuatu yang saya tidak sadari di header
Jonathan
@JonathanLeaders: Ini berarti Anda harus menambahkan domain ke daftar yang diizinkan pada info.plist proyek Anda, karena itu bukan panggilan https.
JoeGalind
6
Diperbarui untuk 2019, tidak lagi usang
Jonathan
12

Cara paling sederhana yang saya temukan adalah dengan menggunakan BitmapDescriptorFactory.defaultMarker () dokumentasi bahkan memiliki contoh pengaturan warna. Dari kode saya sendiri:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))
Michael Hamilton
sumber
Apakah ini Android saja, atau juga untuk browser web?
Jonathan
@Jonathan - ini hanya untuk android - contoh yang dia posting adalah di JAVA
dazza5000
2

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

GuGuss
sumber