Google Maps API 3 - Niestandardowy kolor znacznika dla domyślnego znacznika (kropki)

Widziałem wiele innych pytań podobnych do tego ( tutaj , tutaj i tutaj ), ale wszystkie zaakceptowały odpowiedzi, które nie rozwiązują mojego problemu. Najlepszym rozwiązaniem, jakie znalazłem dla tego problemu, jest biblioteka StyledMarker , która pozwala zdefiniować niestandardowe kolory dla markerów, ale nie mogę użyć domyślnego markera (tego, który otrzymujesz, kiedy przeszukujesz mapy google - z kropka na środku), wydaje się, że zapewnia markerom literę w środku lub specjalną ikonę.

Możesz dynamicznie żądać obrazów ikon z interfejsu Google wykresów za pomocą adresów URL:

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

Który wygląda tak: obraz ma wymiary 21 x 34 pikseli, a końcówka szpilki znajduje się w pozycji (10, 34)

Będziesz także potrzebować osobnego obrazu cienia (aby nie nachodził na ikony w pobliżu):

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

Który wygląda tak: obraz ma wymiary 40 x 37 pikseli, a końcówka szpilki znajduje się w pozycji (12, 35)

Podczas konstruowania MarkerImage musisz odpowiednio ustawić rozmiar i punkty kontrolne:

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

Następnie możesz dodać znacznik do swojej mapy za pomocą:

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

Po prostu zastąp „FE7569” kodem koloru, którego szukasz. Na przykład:

Podziękowania za inspirację dla Jacka B Nimble ;)

Jeśli korzystasz z Google Maps API v3, możesz użyć setIconnp

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

Lub jako część znacznika init:

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

Inne kolory:

• Niebieski znacznik
• Czerwony znacznik
• Fioletowy marker
• Żółty znacznik
• Zielony znacznik

Użyj poniższego kodu, aby zaktualizować domyślne markery w różnych kolorach.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

Oto fajne rozwiązanie przy użyciu samego interfejsu API Map Google. Bez usług zewnętrznych, bez dodatkowej biblioteki. Umożliwia niestandardowe kształty oraz wiele kolorów i stylów. Rozwiązanie wykorzystuje wektorowe markery, które GoogleMaps wywołań API Symbole .

Oprócz kilku i ograniczonych predefiniowanych symboli, możesz stworzyć dowolny kształt dowolnego koloru, określając ciąg ścieżki SVG ( Spec ).

Aby go użyć, zamiast ustawiać opcję znacznika „ikona” na adresie URL obrazu, ustaw go na słownik zawierający opcje symboli. Jako przykład udało mi się stworzyć jeden symbol, który jest dość podobny do standardowego znacznika:

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

Uważam, aby zachować kluczowy punkt kształtu na 0,0, aby uniknąć konieczności definiowania parametrów centrowania ikony znacznika. Kolejny przykład ścieżki, ten sam znacznik bez kropki:

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

A tutaj masz bardzo prostą i brzydką kolorową flagę:

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

Możesz także tworzyć ścieżki za pomocą wizualnego narzędzia, takiego jak Inkscape (GNU-GPL, multiplatform). Kilka przydatnych wskazówek:

• Interfejs API Google akceptuje tylko jedną ścieżkę, więc musisz zmienić dowolny inny obiekt (kwadrat, cercle ...) w ścieżkę i połączyć je jako jedną. Oba polecenia w menu Ścieżka.
• Aby przenieść ścieżkę do (0,0), przejdź do trybu edycji ścieżki (F2) zaznacz wszystkie węzły sterujące i przeciągnij je. Przeniesienie obiektu za pomocą F1 nie zmieni współrzędnych węzła ścieżki.
• Aby upewnić się, że punkt odniesienia ma wartość (0,0), możesz wybrać go sam i edytować współrzędne ręcznie na górnym pasku narzędzi.
• Po zapisaniu pliku SVG, który jest plikiem XML, otwórz go za pomocą edytora, poszukaj elementu svg: path i skopiuj zawartość atrybutu „d”.

Cóż, najbliższą rzeczą, jaką udało mi się uzyskać dzięki StyledMarker, jest to .

Kula pośrodku nie jest jednak tak duża jak domyślna. Klasa StyledMarker po prostu buduje ten adres URL i prosi interfejs API Google o utworzenie znacznika .

Z Przykład użycia klasy użytkowania „% E2% 80% A2” jako tekstu, na przykład:

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

Będziesz musiał zmodyfikować StyledMarker.js, aby skomentować linie:

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

ponieważ spowoduje to przycięcie ciągu tekstowego do 2 znaków.

Alternatywnie możesz utworzyć niestandardowe obrazy znaczników na podstawie domyślnego z pożądanymi kolorami i zastąpić domyślny znacznik kodem takim jak ten:

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

Rozszerzyłem nieco odpowiedź vokimona , dzięki czemu jest nieco wygodniejsza do zmiany innych właściwości.

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

Stosowanie:

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

Lub podczas definiowania nowego znacznika:

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

Cześć, możesz użyć ikony jako SVG i ustawić kolory. Zobacz ten kod

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

od wersji 3.11 interfejsu API map Google, Iconobiekt zastępujeMarkerImage . Ikona obsługuje te same parametry, co MarkerImage. Uważam nawet, że jest to nieco prostsze.

Przykład może wyglądać następująco:

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

w celu uzyskania dalszych informacji sprawdź tę stronę

W Internet Explorer , to rozwiązanie nie działa w SSL.

Błąd w konsoli można zobaczyć jako:

SEC7111 : HTTPS bezpieczeństwo jest zagrożone przez to ,

Obejście : Jak zasugerował jeden z użytkowników, zamień chart.apis.google.com na chart.googleapis.com, aby uzyskać ścieżkę URL, aby uniknąć błędu SSL.

Jak wspomnieli inni, odpowiedź vokimona jest świetna, ale niestety Mapy Google działają nieco wolno, gdy jednocześnie dostępnych jest wiele znaczników opartych na SymbolPath / SVG.

Wygląda na to, że użycie identyfikatora URI danych jest znacznie szybsze, mniej więcej na poziomie PNG.

Ponadto, ponieważ jest to pełny dokument SVG, możliwe jest użycie odpowiedniego wypełnionego koła dla kropki. Ścieżka jest modyfikowana, więc nie jest już przesunięta w lewy górny róg, więc kotwica musi zostać zdefiniowana.

Oto zmodyfikowana wersja, która generuje te znaczniki:

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

Stosowanie:

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

Minusem, podobnie jak obraz PNG, jest to, że można kliknąć cały prostokąt. Teoretycznie nie jest trudno prześledzić ścieżkę SVG i wygenerować wielokąt MarkerShape .

Możesz użyć tego kodu, działa dobrze.

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

Połącz znacznik symboliczny, którego ścieżka rysuje kontur, ze znakiem „●” na środku. Możesz zastąpić kropkę innym tekstem („A”, „B” itp.) Według potrzeb.

Ta funkcja zwraca opcje znacznika z danym tekstem (jeśli istnieje), kolorem tekstu i kolorem wypełnienia. Używa koloru tekstu dla konturu.

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

Próbuję utworzyć dwa niestandardowe znaczniki mapy google, przy użyciu tego kodu uruchomienia canvg.js to najlepsza kompatybilność z przeglądarką. Skomentowany kod nie obsługuje natychmiast IE11.

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>

Przez długi czas starałem się poprawić znacznik narysowany vokimona i uczynić go bardziej podobnym do tego z Google Maps (i prawie się udało). Oto kod, który mam:

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

Skalowałem go również o 0,8.

zmień go na chart.googleapis.com jako ścieżkę, w przeciwnym razie SSL nie będzie działać

Używając swift i Google Maps Api v3, był to najłatwiejszy sposób, w jaki mogłem to zrobić:

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

mam nadzieję, że to komuś pomoże.

Są to niestandardowe markery kołowe

small_red:

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

mały_żółty:

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

mała_zielona:

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

Są to obrazy 9 x 9 png.

Gdy znajdą się na twojej stronie, możesz po prostu przeciągnąć je, a będziesz mieć rzeczywisty plik png.

Możesz także użyć kodu koloru.

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

Czasami na coś naprawdę prostego można odpowiedzieć złożonym. Nie twierdzę, że żadna z powyższych odpowiedzi jest niepoprawna, ale chciałbym tylko zastosować, że można to zrobić tak prosto:

Wiem, że to pytanie jest stare, ale jeśli ktoś chce po prostu zmienić kolor pinezki lub znacznika, zapoznaj się z dokumentacją: https://developers.google.com/maps/documentation/android-sdk/marker

po dodaniu znacznika wystarczy ustawić właściwość icon:

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

Do wyboru jest 10 kolorów domyślnych . Jeśli to nie wystarczy (proste rozwiązanie), prawdopodobnie wybrałbym bardziej złożony podany w innych odpowiedziach, spełniając bardziej złożoną potrzebę.

ps: Napisałem coś podobnego w innej odpowiedzi i dlatego powinienem odnieść się do tej odpowiedzi, ale ostatnim razem, gdy to zrobiłem, poproszono mnie o opublikowanie odpowiedzi, ponieważ była tak krótka (jak ta) ..