Google Maps API 3 - Varsayılan (nokta) işaretçisi için özel işaretçi rengi

Buna benzer başka sorular da gördüm ( burada , burada ve burada ), ama hepsi sorunumu çözmeyen cevapları kabul ettiler. Soruna bulduğum en iyi çözüm , işaretçiler için özel renkler tanımlamanıza izin veren StyledMarker kütüphanesidir, ancak varsayılan işaretçiyi (bir google harita araması yaptığınızda aldığınız) kullanamıyorum. ortada bir nokta), yalnızca işaretleyicilere bir harf veya özel bir simge sağlıyor gibi görünüyor.

URL'lerle Google grafik API'sındaki simge resimlerini dinamik olarak isteyebilirsiniz :

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

Şuna benzer: görüntü 21x34 piksel ve pim ucu konumdaydı (10, 34)

Ayrıca ayrı bir gölge görüntüsü de istersiniz (böylece yakındaki simgelerle çakışmaz):

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

Şuna benzer: görüntü 40x37 piksel ve pim ucu konumdaydı (12, 35)

Eğer inşa ne zaman MarkerImage buna göre boyut ve bağlantı noktaları ayarlamak üzere gerekmez s:

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

Daha sonra işaretçiyi haritanıza aşağıdakilerle ekleyebilirsiniz:

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

"FE7569" yerine renk kodu yazmanız yeterlidir. Örneğin:

İlham için Jack B Çevik nedeniyle kredi ;)

Google Maps API v3 kullanıyorsanız, setIconörn.

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

Veya marker init'in bir parçası olarak:

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

Diğer renkler:

• Mavi işaretleyici
• Kırmızı işaret
• Mor işaretleyici
• Sarı işaret
• Yeşil işaret

Farklı renklerle varsayılan işaretleyicileri güncellemek için aşağıdaki kod parçasını kullanın.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

İşte Gooogle Haritalar API'sının kendisini kullanarak hoş bir çözüm. Harici servis yok, ekstra kütüphane yok. Ve özel şekiller ve birden fazla renk ve stil sağlar. Çözüm, googlemaps api'nin Sembolleri çağırdığı vektörel işaretçiler kullanır .

Az sayıda ve sınırlı önceden tanımlanmış sembollerin yanı sıra, bir SVG yol dizesi ( Spec ) belirterek herhangi bir rengin herhangi bir şeklini oluşturabilirsiniz .

Bunu kullanmak için, resim simgesi olarak 'simge' işaretleyici seçeneğini ayarlamak yerine, sembol seçeneklerini içeren bir sözlüğe ayarlayın. Örneğin, standart işaretçiye oldukça benzer bir sembol oluşturmayı başardım:

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

I Şekil anahtarı noktasını 0,0 olarak tutmaya dikkat edersiniz, işaretleyici simge merkezleme parametrelerini tanımlamaktan kaçının. Başka bir yol örneği, nokta olmadan aynı işaretleyici:

    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',

Ve burada çok basit ve çirkin renkli bir bayrağınız var:

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

Ayrıca yolları Inkscape (GNU-GPL, çoklu platform) gibi görsel bir araç kullanarak da oluşturabilirsiniz . Bazı yararlı ipuçları:

• Google API yalnızca tek bir yolu kabul ettiğinden, başka herhangi bir nesneyi (kare, cercle ...) bir yola dönüştürmeniz ve tek bir yol olarak birleştirmeniz gerekir. Yol menüsündeki her iki komut.
• Yolu (0,0) 'a taşımak için, Yol Düzenleme moduna (F2) gidin, tüm kontrol düğümlerini seçin ve sürükleyin. Nesneyi F1 ile taşımak, yol düğümü koordinatlarını değiştirmez.
• Referans noktasının (0,0) konumunda olduğundan emin olmak için, tek başına seçebilir ve üst araç çubuğunda el ile düzenleri düzenleyebilirsiniz.
• XML olan SVG dosyasını kaydettikten sonra bir düzenleyiciyle açın, svg: path öğesini arayın ve 'd' özniteliğinin içeriğini kopyalayın.

StyledMarker ile elde edebildiğim en yakın şey bu .

Ortadaki mermi, varsayılan mermi kadar büyük değil. StyledMarker sınıfı bu URL'yi oluşturur ve google api'den işaretçiyi oluşturmasını ister .

Sınıftan örnek olarak metniniz olarak "% E2% 80% A2" kullanın :

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

Çizgileri yorumlamak için StyledMarker.js dosyasını değiştirmeniz gerekir:

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

çünkü bu metin dizesini 2 karaktere kırpacaktır.

Alternatif olarak, istediğiniz renkleri içeren varsayılan işarete dayalı özel işaretçi görüntüleri oluşturabilir ve aşağıdaki gibi kodla varsayılan işaretleyiciyi geçersiz kılabilirsiniz:

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

Ben uzattığımızı vokimon cevabı sıra diğer özellikleri değiştirmek için biraz daha uygun hale biraz.

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

Kullanımı:

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

Veya yeni bir işaretleyici tanımlarken:

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

Merhaba simgeyi SVG olarak kullanabilir ve renkleri ayarlayabilirsiniz. Bu kodu görün

/*
 * 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>

Google Haritalar API'sının 3.11 sürümünden bu yana Iconnesne değiştirilir MarkerImage. Icon, MarkerImage ile aynı parametreleri destekler. Hatta biraz daha dümdüz buldum.

Bir örnek şöyle görünebilir:

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

daha fazla bilgi için bu siteyi kontrol edin

Gelen Internet Explorer , bu çözüm SSL çalışmaz.

Konsolda hatayı şu şekilde görebilirsiniz:

SEC7111 : HTTPS güvenlik tarafından ele geçirilirse bu ,

Çözüm : Buradaki kullanıcılardan birinin önerdiği gibi SSL hatasını önlemek için URL yolu için chart.apis.google.com adresini chart.googleapis.com olarak değiştirin .

Diğerlerinin de belirttiği gibi, vokimon'un cevabı harika, ancak aynı anda çok sayıda SymbolPath / SVG tabanlı işaretçi olduğunda Google Haritalar biraz yavaş.

Bir Veri URI'sinin kullanılması, yaklaşık PNG'lerle eşit olduğundan çok daha hızlı görünüyor.

Ayrıca, tam bir SVG belgesi olduğundan, nokta için uygun doldurulmuş bir daire kullanmak mümkündür. Yol, artık sol üste kaydırılmayacak şekilde değiştirilir, bu nedenle çapanın tanımlanması gerekir.

İşte bu işaretçileri oluşturan değiştirilmiş bir sürüm:

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

Kullanımı:

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

Dezavantajı, bir PNG görüntüsü gibi, tüm dikdörtgenin tıklanabilir olmasıdır. Teoride SVG yolunu izlemek ve bir MarkerShape poligonu oluşturmak çok zor değildir .

Bu kodu kullanabilirsiniz iyi çalışır.

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

Bir birleştirin sembol tabanlı merkezi için '●' karakteri ile olan yol anahat çizer işaretleyici. Noktayı istediğiniz gibi diğer metinlerle ('A', 'B' vb.) Değiştirebilirsiniz.

Bu işlev, belirli bir metni (varsa), metin rengini ve dolgu rengini içeren bir işaretçi için seçenekler döndürür. Anahat için metin rengini kullanır.

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

Özel google harita işaretleyicisini oluşturmak için iki yol deniyorum, kullanılan bu çalışma kodu canvg.js tarayıcı için en iyi uyumluluktur.

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>

Uzun zamandır vokimon'un çizilmiş işaretçisini geliştirmeyi ve Google Haritalar'a daha benzer hale getirmeyi denedim (ve hemen hemen başarılı oldum). Bu var kod:

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)];   

Ayrıca 0.8 oranında ölçeklendirdim.

yol için chart.googleapis.com olarak değiştirin, aksi takdirde SSL çalışmaz

Hızlı ve Google Maps Api v3 kullanarak bunu yapmanın en kolay yolu buydu:

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

umarım birine yardım eder.

Bunlar özel Dairesel işaretleyicilerdir

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==

Bunlar 9x9 png görüntüler.

Sayfanıza girdikten sonra onları sürükleyebilirsiniz ve gerçek png dosyasına sahip olacaksınız.

Renk kodunu da kullanabilirsiniz.

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

Bazen gerçekten basit bir şey karmaşık cevaplanabilir. Yukarıdaki cevaplardan herhangi birinin yanlış olduğunu söylemiyorum, ama sadece şunu söyleyebilirim ki, bu kadar basit yapılabilir:

Bu sorunun eski olduğunu biliyorum, ancak herhangi biri iğne veya işaretleyici rengine geçmek istiyorsa, belgelere bakın: https://developers.google.com/maps/documentation/android-sdk/marker

işaretçinizi eklediğinizde icon-özelliğini ayarlamanız yeterlidir:

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

Aralarından seçim yapabileceğiniz 10 varsayılan renk vardır . Bu yeterli değilse (basit çözüm), muhtemelen daha karmaşık bir ihtiyacı yerine getirerek diğer cevaplarda verilen daha karmaşık olanı seçerdim.

ps: Başka bir cevapta benzer bir şey yazdım ve bu yüzden bu cevaba atıfta bulunmalıyım, ama bunu en son yaptığımda, çok kısa olduğu için (bu gibi) cevabı göndermem istendi.