Javascript, Ändern Sie die Farbe der Google Map-Markierung

Darf ich einen Weg kennen, um die Farbe der Google Map-Markierung über Javascript zu ändern? Ich bin neu in diesem Bereich und jede Hilfe wäre sehr dankbar. Vielen Dank.

Ich habe den folgenden Code verwendet, um einen Marker zu erstellen

 marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], 
     locations[i][2]),
     animation: google.maps.Animation.DROP,
     map: map
 });

In Google Maps API v3 können Sie versuchen, das Markierungssymbol zu ändern. Zum Beispiel für grüne Symbole verwenden:

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:

• http://maps.google.com/mapfiles/ms/icons/blue-dot.png
• http://maps.google.com/mapfiles/ms/icons/red-dot.png

Usw.

Sie können die strokeColorEigenschaft verwenden:

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});

Weitere Möglichkeiten finden Sie auf dieser Seite .

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

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

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

siehe Beispiel hier

Sie können die Google Chart-API verwenden und jede Farbe mit RGB-Code im laufenden Betrieb generieren:

Beispiel: Marker mit #ddd Farbe:

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

wie oben angegeben mit einschließen

 var marker = new google.maps.Marker({
    position: marker,
    title: 'Hello World',
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd'
});

Die Antwort von Bahadır Yağan hat mir sehr gut gefallen, außer dass ich es nicht mochte, abhängig von einer begrenzten Anzahl von Symbolen von Google oder einer externen API meine Markierungssymbole zu generieren. Hier ist die erste Lösung:

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});

Und hier ist meine verbesserte Lösung:

var marker = new google.maps.Marker({
            position: myLatlng,
            icon:{
                path: 'm 12,2.4000002 c -2.7802903,0 -5.9650002,1.5099999 -5.9650002,5.8299998 0,1.74375 1.1549213,3.264465 2.3551945,4.025812 1.2002732,0.761348 2.4458987,0.763328 2.6273057,2.474813 L 12,24 12.9825,14.68 c 0.179732,-1.704939 1.425357,-1.665423 2.626049,-2.424188 C 16.809241,11.497047 17.965,9.94 17.965,8.23 17.965,3.9100001 14.78029,2.4000002 12,2.4000002 Z',
                fillColor: '#00FF00',
                fillOpacity: 1.0,
                strokeColor: '#000000',
                strokeWeight: 1,
                scale: 2,
                anchor: new google.maps.Point(12, 24),
            },
        });

Ich wollte ein bestimmtes PIN-Symbol, also habe ich eines mit inkscape erstellt, dann die SVG-Datei geöffnet und den SVG-Pfad in den Pfad in den Code kopiert. Dies funktioniert jedoch mit jedem SVG-Pfad, den Sie in das Attribut "Pfad" des Symbolobjekt.

Hier ist das Ergebnis:

Ich muss 4 Schiffe auf einer einzelnen Karte festlegen, daher verwende ich das Beispiel von Google Developers und verdrehe es dann

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

In der folgenden Funktion habe ich 3 weitere Farboptionen eingestellt:

function setMarkers(map, locations) {
...
var image = {
    url: 'img/bullet_amarelo.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(40, 40),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 40)
  };
  var image1 = {
            url: 'img/bullet_azul.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            size: new google.maps.Size(40, 40),
            // The origin for this image is 0,0.
            origin: new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            anchor: new google.maps.Point(0, 40)
          };
  var image2 = {
          url: 'img/bullet_vermelho.png',
          // This marker is 20 pixels wide by 32 pixels tall.
          size: new google.maps.Size(40, 40),
          // The origin for this image is 0,0.
          origin: new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at 0,32.
          anchor: new google.maps.Point(0, 40)
        };
  var image3 = {
          url: 'img/bullet_verde.png',
          // This marker is 20 pixels wide by 32 pixels tall.
          size: new google.maps.Size(40, 40),
          // The origin for this image is 0,0.
          origin: new google.maps.Point(0,0),
          // The anchor for this image is the base of the flagpole at 0,32.
          anchor: new google.maps.Point(0, 40)
        };
...
}

Und im FOR-Balg habe ich für jedes Schiff eine Farbe festgelegt:

for (var i = 0; i < locations.length; i++) {
...
    if (i==0) var imageV=image;
    if (i==1) var imageV=image1;
    if (i==2) var imageV=image2;
    if (i==3) var imageV=image3;
...
# remember to change icon: image to icon: imageV
}

Das Endergebnis:

http://www.mercosul-line.com.br/site/teste.html

Ich schlage vor, die Google Charts-API zu verwenden, da Sie Text, Textfarbe, Füllfarbe und Umrissfarbe angeben können, wobei alle Hex-Farbcodes verwendet werden, z. B. # FF0000 für Rot. Sie können es wie folgt nennen:

function getIcon(text, fillColor, textColor, outlineColor) {
  if (!text) text = '•'; //generic map dot
  var iconUrl = "http://chart.googleapis.com/chart?cht=d&chdp=mapsapi&chl=pin%27i\\%27[" + text + "%27-2%27f\\hv%27a\\]h\\]o\\" + fillColor + "%27fC\\" + textColor + "%27tC\\" + outlineColor + "%27eC\\Lauto%27f\\&ext=.png";
  return iconUrl;
}

Wenn Sie dann Ihren Marker erstellen, legen Sie einfach die Symboleigenschaft als solche fest, wobei die myColor-Variablen Hex-Werte sind (abzüglich des Hash-Zeichens):

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  animation: google.maps.Animation.DROP,
  map: map,
  icon: getIcon(null, myColor, myColor2, myColor3)
});

Sie können verwenden http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000 eine etwas einfachere Entschlüsselung als alternative URL verwenden, wenn Sie nur Text festlegen und die Farbe füllen müssen.

Die Antwort von khurram bezieht sich auf eine Website eines Drittanbieters, die zur Google Charts-API umleitet. Dies bedeutet, wenn diese Person ihren Server herunterfährt, werden Sie abgespritzt. Ich bevorzuge die Flexibilität, die die Google API bietet, sowie die Zuverlässigkeit, direkt zu Google zu gehen. Stellen Sie einfach sicher, dass Sie für jede Farbe einen Wert angeben, da dies sonst nicht funktioniert.

Um die akzeptierte Antwort zu erweitern, können Sie benutzerdefinierte Antworten erstellen MarkerImages mithilfe der API unter Farbenhttp://chart.googleapis.com

Dies ändert nicht nur die Farbe, sondern auch die Markerform, was möglicherweise unerwünscht ist.

const marker = new window.google.maps.Marker(
        position: markerPosition,
        title: markerTitle,
        map: map)
marker.addListener('click', () => marker.setIcon(changeIcon('00ff00'));)

const changeIcon = (newIconColor) => {
    const newIcon = new window.google.maps.MarkerImage(
        `http://chart.googleapis.com/chart?                                      
        chst=d_map_spin&chld=1.0|0|${newIconColor}|60|_|%E2%80%A2`,
        new window.google.maps.Size(21, 34),
        new window.google.maps.Point(0, 0),
        new window.google.maps.Point(10, 34),
        new window.google.maps.Size(21,34)
    );
    return newIcon
}

Quelle: kostenloser udacity kurs auf google maps apis

var map_marker = $ (". map-marker"). children ("img"). attr ("src") var pinImage = new google.maps.MarkerImage (map_marker);

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