Google Maps API 3 - Warna marker khusus untuk marker default (dot)

Saya telah melihat banyak pertanyaan lain yang mirip dengan ini (di sini , di sini dan di sini ), tetapi mereka semua telah menerima jawaban yang tidak menyelesaikan masalah saya. Solusi terbaik yang saya temukan untuk masalah ini adalah pustaka StyledMarker , yang memungkinkan Anda menentukan warna khusus untuk marker, tetapi saya tidak bisa menggunakannya untuk menggunakan marker default (yang Anda dapatkan ketika Anda melakukan pencarian peta google - dengan sebuah titik di tengah), sepertinya memberikan spidol dengan huruf di, atau dengan ikon khusus.

Anda dapat secara dinamis meminta gambar ikon dari api Google charts dengan url:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

Yang terlihat seperti ini: gambar adalah 21x34 piksel dan ujung pin berada pada posisi (10, 34)

Dan Anda juga ingin gambar bayangan yang terpisah (sehingga tidak tumpang tindih dengan ikon terdekat):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

Yang terlihat seperti ini: gambar adalah 40x37 piksel dan ujung pin berada pada posisi (12, 35)

Saat Anda membuat MarkerImage , Anda perlu mengatur ukuran dan titik jangkar yang sesuai:

    var pinColor = "FE7569";
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

Anda kemudian dapat menambahkan penanda ke peta Anda dengan:

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

Cukup ganti "FE7569" dengan kode warna yang Anda cari. Misalnya:

Kredit karena Jack B Nimble untuk inspirasi;)

Jika Anda menggunakan Google Maps API v3 Anda dapat menggunakan setIconmis

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Atau sebagai bagian dari marker init:

marker = new google.maps.Marker({
    icon: 'http://...'
});

Warna lain:

• Spidol biru
• Spidol merah
• Spidol ungu
• Spidol kuning
• Spidol hijau

Gunakan potongan kode berikut untuk memperbarui penanda default dengan warna berbeda.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

Berikut adalah solusi yang bagus menggunakan Gooogle Maps API itu sendiri. Tidak ada layanan eksternal, tidak ada perpustakaan tambahan. Dan itu memungkinkan bentuk kustom dan beberapa warna dan gaya. Solusinya menggunakan penanda vektor, yang disebut api oleh simbol Google .

Selain beberapa simbol terbatas dan terbatas, Anda dapat membuat bentuk apa pun dengan warna apa pun dengan menetapkan string jalur SVG ( Spec ).

Untuk menggunakannya, alih-alih mengatur opsi penanda 'ikon' ke url gambar, Anda mengaturnya ke kamus yang berisi opsi simbol. Sebagai contoh, saya berhasil membuat satu simbol yang sangat mirip dengan penanda standar:

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

Jika Anda berhati-hati untuk menjaga titik kunci bentuk 0,0 Anda menghindari harus menentukan parameter penanda ikon pusat. Contoh jalur lain, penanda yang sama tanpa titik:

    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',

Dan di sini Anda memiliki bendera berwarna yang sangat sederhana dan jelek:

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

Anda juga dapat membuat jalur menggunakan alat visual seperti Inkscape (GNU-GPL, multiplatform). Beberapa petunjuk bermanfaat:

• Google API hanya menerima satu lintasan, jadi Anda harus mengubah objek lain (persegi, cercle ...) menjadi lintasan dan bergabung sebagai satu. Kedua perintah di menu Path.
• Untuk memindahkan jalur ke (0,0), buka mode Edit Jalur (F2) pilih semua node kontrol dan seret. Memindahkan objek dengan F1, tidak akan mengubah coord jalur simpul.
• Untuk memastikan titik referensi di (0,0), Anda dapat memilihnya sendiri dan mengeditnya dengan tangan pada bilah alat atas.
• Setelah menyimpan file SVG, yang merupakan XML, buka dengan editor, cari elemen svg: path dan salin konten atribut 'd'.

Yah, hal terdekat yang bisa saya dapatkan dengan StyledMarker adalah ini .

Peluru di tengah tidak cukup besar seperti yang standar sekalipun. Kelas StyledMarker cukup membuat url ini dan meminta google api untuk membuat marker .

Dari kelas gunakan contoh gunakan "% E2% 80% A2" sebagai teks Anda, seperti pada:

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

Anda perlu memodifikasi StyledMarker.js untuk mengomentari baris:

  if (text_) {
    text_ = text_.substr(0,2);
  }

karena ini akan memangkas string teks menjadi 2 karakter.

Atau Anda dapat membuat gambar marker kustom berdasarkan gambar default dengan warna yang Anda inginkan dan mengganti marker default dengan kode seperti ini:

marker = new google.maps.Marker({
  map:map,
  position: latlng,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});

Saya telah sedikit memperluas jawaban vokimon , membuatnya sedikit lebih nyaman untuk mengubah properti lainnya juga.

function customIcon (opts) {
  return Object.assign({
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
    fillColor: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

Pemakaian:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

Atau ketika mendefinisikan penanda baru:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});

Hai, Anda dapat menggunakan ikon sebagai SVG dan mengatur warna. Lihat kode ini

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            icon: {
                path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>

sejak versi 3.11 dari google maps API, Iconobjek menggantikan MarkerImage. Ikon mendukung parameter yang sama dengan MarkerImage. Saya bahkan merasa itu sedikit lebih lurus ke depan.

Contohnya bisa seperti ini:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

untuk informasi lebih lanjut, periksa situs ini

Di Internet Explorer , solusi ini tidak berfungsi di ssl.

Orang dapat melihat kesalahan di konsol sebagai:

SEC7111 : Keamanan HTTPS terganggu oleh ini ,

Penanganan Masalah : Sebagai salah satu pengguna di sini disarankan ganti chart.apis.google.com ke chart.googleapis.com untuk jalur URL untuk menghindari kesalahan SSL.

Seperti yang telah disebutkan orang lain, jawaban vokimon sangat bagus tetapi sayangnya Google Maps agak lambat ketika ada banyak penanda berbasis SymbolPath / SVG sekaligus.

Sepertinya menggunakan Data URI jauh lebih cepat, kira-kira setara dengan PNG.

Juga, karena ini adalah dokumen SVG lengkap, dimungkinkan untuk menggunakan lingkaran penuh yang tepat untuk titik tersebut. Jalur dimodifikasi sehingga tidak lagi diimbangi ke kiri atas, sehingga jangkar harus ditentukan.

Berikut adalah versi yang dimodifikasi yang menghasilkan penanda ini:

var coloredMarkerDef = {
    svg: [
        '<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
            '<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
            '<circle cx="11" cy="11" r="3"/>',
        '</svg>'
    ].join(''),
    anchor: {x: 11, y: 41},
    size: {width: 22, height: 41}
};

var getColoredMarkerSvg = function(color) {
    return coloredMarkerDef.svg.replace('{fillColor}', color);
};

var getColoredMarkerUri = function(color) {
    return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};

var getColoredMarkerIcon = function(color) {
    return {
        url: getColoredMarkerUri(color),
        anchor: coloredMarkerDef.anchor,
        size: coloredMarkerDef.size,
        scaledSize: coloredMarkerDef.size
    }
};

Pemakaian:

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude),
    icon: getColoredMarkerIcon("#FFF")
});

Downside, seperti gambar PNG, adalah seluruh persegi panjang dapat diklik. Secara teori, tidak terlalu sulit untuk melacak jalur SVG dan menghasilkan poligon MarkerShape .

Anda dapat menggunakan kode ini berfungsi dengan baik.

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });

Gabungkan penanda berbasis simbol yang jalurnya menggambar garis besar, dengan karakter '●' untuk tengah. Anda dapat mengganti titik dengan teks lain ('A', 'B', dll.) Seperti yang diinginkan.

Fungsi ini mengembalikan opsi untuk marker dengan teks yang diberikan (jika ada), warna teks, dan mengisi warna. Ini menggunakan warna teks untuk garis besar.

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}

Saya mencoba dua cara untuk membuat penanda peta google khusus, kode jalankan ini menggunakan canvg.js adalah kompatibilitas terbaik untuk browser. Kode Commented-Out tidak mendukung IE11 saat ini.

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>

Saya mencoba untuk waktu yang lama untuk meningkatkan marker yang ditarik vokimon dan membuatnya lebih mirip dengan Google Maps satu (dan cukup banyak berhasil). Ini kode yang saya dapat:

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

Saya juga diskalakan dengan 0,8.

ubah ke chart.googleapis.com untuk jalur, jika tidak, SSL tidak akan berfungsi

Menggunakan swift dan Google Maps Api v3, ini adalah cara termudah yang saya bisa lakukan:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

semoga membantu seseorang.

Ini adalah marker Edaran khusus

small_red:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

small_yellow:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

small_green:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

small_blue:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

Mereka adalah gambar 9x9 png.

Setelah mereka berada di halaman Anda, Anda bisa menariknya dan Anda akan memiliki file png yang sebenarnya.

Anda juga dapat menggunakan kode warna.

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });

Terkadang sesuatu yang sangat sederhana, bisa dijawab kompleks. Saya tidak mengatakan bahwa salah satu dari jawaban di atas salah, tetapi saya hanya akan menerapkan, bahwa itu dapat dilakukan sesederhana ini:

Saya tahu pertanyaan ini sudah lama, tetapi jika ada orang yang hanya ingin mengubah warna pin atau marker, lihat dokumentasi: https://developers.google.com/maps/documentation/android-sdk/marker

ketika Anda menambahkan penanda Anda cukup atur properti ikon:

GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
    .position(latLng)
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

Ada 10 warna default untuk dipilih . Jika itu tidak cukup (solusi sederhana) maka saya mungkin akan mencari yang lebih kompleks yang diberikan dalam jawaban lain, memenuhi kebutuhan yang lebih kompleks.

ps: Saya telah menulis sesuatu yang serupa di jawaban lain dan oleh karena itu saya harus merujuk ke jawaban itu, tetapi terakhir kali saya melakukan itu, saya diminta untuk mengirim jawaban karena sangat pendek (seperti yang ini) ..