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

72

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
 });
javascript  google-maps  google-maps-markers 
— Hasitha Shan
quelle

Antworten:

170

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:

Usw.

— jsalonen
quelle
Vielen Dank :) das ist, wonach ich gesucht habe :) darf ich wissen, wende ich dies an der Stelle an, an der ich den Marker instanziiere, wie ich es gezeigt habe, oder ist er außerhalb separat definiert? :)
— Hasitha Shan
Beide arbeiten. Entweder können Sie ein iconAttribut hinzufügen und festlegen oder es verwenden setIcon. Ich werde diesbezüglich eine Notiz hinzufügen.
— jsalonen
Beste Antwort in allen Stackoverflow bisher!
— digz6666
1
Diese Symbole werden anscheinend nicht mit Buchstaben geliefert. Diese finden Sie unter maps.google.com/mapfiles/marker_green.png , maps.google.com/mapfiles/marker_greenA.png .
— Tempranova
Gibt es eine Möglichkeit, alle Symbole anzuzeigen? Ich habe versucht, die abzunehmen blue-dotund bekam eine 404
— Matt Westlake
40

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 .

— Bahadır Yağan
quelle
14

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

— Khurram
quelle
13

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'
});
— guido _nhcol.com.br_
quelle
wahr es kann, jede Farbe mit RGB-Code im laufenden Betrieb erzeugen
— Deep 3015
Ich verwende diese sehr schöne Symbolbibliothek für Marker iconarchive.com. Sie hat einige vordefinierte Größen, die für ein schnelles Design sehr nützlich sind.
— guido _nhcol.com.br_
sieht sehr leistungsfähig und flexibel aus, aber leider wurde diese API im März 2019
— deaktiviert.
8

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:

Geben Sie hier die Bildbeschreibung ein

— androidseb
quelle
3

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

— LuyRamone
quelle
3

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.

— Mideus
quelle
Leider wurde diese API im März 2019
— deaktiviert,
1

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

— Alexey Nikonov
quelle
-1

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
    });
  }
— Azim Munna
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.