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?

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.

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.

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

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,
    });

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

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

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

Artikel yang relatif baru ini memberikan contoh sederhana dengan seperangkat ikon berwarna Google Maps.