Google Maps API 3 - Benutzerdefinierte Markierungsfarbe für Standardmarker (Punktmarker)

Ich habe viele ähnliche Fragen gesehen ( hier , hier und hier ), aber alle haben Antworten akzeptiert, die mein Problem nicht lösen. Die beste Lösung, die ich für das Problem gefunden habe, ist die StyledMarker- Bibliothek, mit der Sie benutzerdefinierte Farben für Markierungen definieren können. Ich kann jedoch nicht die Standardmarkierung verwenden (die, die Sie bei einer Google Maps-Suche erhalten - mit ein Punkt in der Mitte), es scheint nur Markierungen mit einem Buchstaben oder einem speziellen Symbol zu versehen.

Sie können dynamisch Symbolbilder aus der Google Charts-API mit den folgenden URLs anfordern:

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

Das sieht so aus: Das Bild ist 21x34 Pixel groß und die Pin-Spitze befindet sich an Position (10, 34).

Außerdem möchten Sie ein separates Schattenbild (damit es die Symbole in der Nähe nicht überlappt):

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

Was so aussieht: Das Bild ist 40x37 Pixel groß und die Pin-Spitze befindet sich an Position (12, 35).

Wenn Sie Ihre MarkerImage s erstellen , müssen Sie die Größe und die Ankerpunkte entsprechend einstellen:

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

Sie können dann den Marker zu Ihrer Karte hinzufügen mit:

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

Ersetzen Sie einfach "FE7569" durch den gewünschten Farbcode. Z.B:

Dank an Jack B Nimble für die Inspiration;)

Wenn Sie Google Maps API v3 verwenden, können Sie setIconz

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

Oder als Teil von marker init:

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

Andere Farben:

• Blauer Marker
• Rote Markierung
• Lila Markierung
• Gelber Marker
• Grüne Markierung

Verwenden Sie den folgenden Code, um Standardmarkierungen mit verschiedenen Farben zu aktualisieren.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

Hier ist eine gute Lösung mit der Gooogle Maps-API. Kein externer Service, keine zusätzliche Bibliothek. Und es ermöglicht benutzerdefinierte Formen und mehrere Farben und Stile. Die Lösung verwendet vektorielle Marker, die von googlemaps api als Symbole bezeichnet werden .

Neben den wenigen und begrenzten vordefinierten Symbolen können Sie jede Form einer beliebigen Farbe erstellen, indem Sie eine SVG-Pfadzeichenfolge ( Spec ) angeben .

Um es zu verwenden, setzen Sie die Markierungsoption 'Symbol' nicht auf die Bild-URL, sondern auf ein Wörterbuch mit den Symboloptionen. Als Beispiel habe ich es geschafft, ein Symbol zu erstellen, das dem Standardmarker ziemlich ähnlich ist:

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

Wenn Sie darauf achten, den Formschlüsselpunkt auf 0,0 zu halten, müssen Sie keine Parameter für die Zentrierung des Markierungssymbols definieren. Ein weiteres Pfadbeispiel, derselbe Marker ohne Punkt:

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

Und hier haben Sie eine sehr einfache und hässliche farbige Flagge:

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

Sie können die Pfade auch mit einem visuellen Tool wie Inkscape (GNU-GPL, Multiplattform) erstellen . Einige nützliche Hinweise:

• Die Google-API akzeptiert nur einen einzelnen Pfad. Sie müssen also jedes andere Objekt (Quadrat, Cercle ...) in einen Pfad verwandeln und als einen einzigen verbinden. Beide Befehle im Menü Pfad.
• Um den Pfad auf (0,0) zu verschieben, wechseln Sie in den Pfadbearbeitungsmodus (F2). Wählen Sie alle Steuerknoten aus und ziehen Sie sie. Durch Verschieben des Objekts mit F1 werden die Pfadknotenkoordinaten nicht geändert.
• Um sicherzustellen, dass der Referenzpunkt bei (0,0) liegt, können Sie ihn alleine auswählen und die Koordinaten von Hand in der oberen Symbolleiste bearbeiten.
• Nachdem Sie die SVG-Datei gespeichert haben, die eine XML-Datei ist, öffnen Sie sie mit einem Editor, suchen Sie nach dem Element svg: path und kopieren Sie den Inhalt des Attributs 'd'.

Nun das nächste , was ich im Stande gewesen bin mit dem StyledMarker zu bekommen , ist dies .

Die Kugel in der Mitte ist jedoch nicht ganz so groß wie die Standardkugel. Die StyledMarker-Klasse erstellt einfach diese URL und fordert die Google-API auf, den Marker zu erstellen .

Verwenden Sie im Beispiel für die Verwendung der Klasse "% E2% 80% A2" als Text, wie in:

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

Sie müssen StyledMarker.js ändern, um die Zeilen zu kommentieren:

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

Dadurch wird die Textzeichenfolge auf 2 Zeichen gekürzt.

Alternativ können Sie benutzerdefinierte Markierungsbilder basierend auf dem Standardmarker mit den gewünschten Farben erstellen und den Standardmarker mit Code wie dem folgenden überschreiben:

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

Ich habe die Antwort von vokimon ein wenig erweitert, um sie auch für das Ändern anderer Eigenschaften etwas bequemer zu machen.

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

Verwendungszweck:

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

Oder beim Definieren eines neuen Markers:

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

Hallo, Sie können das Symbol als SVG verwenden und Farben einstellen. Siehe diesen Code

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

Seit Version 3.11 der Google Maps-API wird das IconObjekt ersetzt MarkerImage. Icon unterstützt dieselben Parameter wie MarkerImage. Ich fand es sogar etwas direkter.

Ein Beispiel könnte so aussehen:

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

Weitere Informationen finden Sie auf dieser Website

In Internet Explorer , diese Lösung nicht in ssl arbeiten.

Man kann den Fehler in der Konsole sehen als:

SEC7111 : HTTPS Sicherheit durch gefährdet ist dies ,

Problemumgehung : Ersetzen Sie als einen der hier vorgeschlagenen Benutzer chart.apis.google.com durch chart.googleapis.com, um den URL-Pfad zu erhalten und SSL-Fehler zu vermeiden.

Wie andere bereits erwähnt haben, ist die Antwort von vokimon großartig, aber leider ist Google Maps etwas langsam, wenn viele SymbolPath / SVG-basierte Marker gleichzeitig vorhanden sind.

Es sieht so aus, als ob die Verwendung eines Daten-URI viel schneller ist, ungefähr auf dem Niveau von PNGs.

Da es sich um ein vollständiges SVG-Dokument handelt, ist es auch möglich, einen ordnungsgemäß ausgefüllten Kreis für den Punkt zu verwenden. Der Pfad wird so geändert, dass er nicht mehr nach links oben versetzt ist. Daher muss der Anker definiert werden.

Hier ist eine modifizierte Version, die diese Marker generiert:

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

Verwendungszweck:

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

Der Nachteil ist, ähnlich wie bei einem PNG-Bild, dass das gesamte Rechteck anklickbar ist. Theoretisch ist es nicht allzu schwierig, den SVG-Pfad zu verfolgen und ein MarkerShape- Polygon zu generieren .

Sie können diesen Code verwenden, es funktioniert gut.

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

Kombinieren Sie eine symbolbasierte Markierung, deren Pfad den Umriss zeichnet, mit einem '●' - Zeichen für die Mitte. Sie können den Punkt nach Bedarf durch anderen Text ('A', 'B' usw.) ersetzen.

Diese Funktion gibt Optionen für eine Markierung mit einem bestimmten Text (falls vorhanden), einer Textfarbe und einer Füllfarbe zurück. Es verwendet die Textfarbe für die Gliederung.

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

Ich versuche zwei Möglichkeiten, um den benutzerdefinierten Google Map-Marker zu erstellen. Dieser verwendete Ausführungscode canvg.js ist die beste Kompatibilität für den Browser. Der auskommentierte Code unterstützt IE11 derzeit nicht.

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>

Ich habe lange versucht, den gezeichneten Marker von Vokimon zu verbessern und ihn Google Maps ähnlicher zu machen (und es ist mir ziemlich gelungen). Dies ist der Code, den ich bekommen habe:

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

Ich habe es auch um 0,8 skaliert.

Ändern Sie den Pfad in chart.googleapis.com, da SSL sonst nicht funktioniert

Mit Swift und Google Maps Api v3 war dies der einfachste Weg, den ich dazu hatte:

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

hoffe es hilft jemandem.

Dies sind benutzerdefinierte kreisförmige Markierungen

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

Es sind 9x9 PNG-Bilder.

Sobald sie auf Ihrer Seite sind, können Sie sie einfach abziehen und Sie haben die eigentliche PNG-Datei.

Sie können auch Farbcode verwenden.

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

Manchmal kann etwas wirklich Einfaches komplex beantwortet werden. Ich sage nicht, dass eine der obigen Antworten falsch ist, aber ich würde nur anwenden, dass es so einfach gemacht werden kann:

Ich weiß, dass diese Frage alt ist, aber wenn jemand nur die Pin- oder Markierungsfarbe ändern möchte, lesen Sie die Dokumentation: https://developers.google.com/maps/documentation/android-sdk/marker

Wenn Sie Ihren Marker hinzufügen, legen Sie einfach die Icon-Eigenschaft fest:

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

Es stehen 10 Standardfarben zur Auswahl . Wenn das nicht genug ist (die einfache Lösung), würde ich mich wahrscheinlich für die komplexeren in den anderen Antworten entscheiden, um ein komplexeres Bedürfnis zu erfüllen.

ps: Ich habe in einer anderen Antwort etwas Ähnliches geschrieben und sollte mich daher auf diese Antwort beziehen, aber als ich das das letzte Mal tat, wurde ich gebeten, die Antwort zu posten, da sie so kurz war (wie diese hier).