Wie kann ich die Farbe eines Google Maps-Markers ändern?

Question

Ich verwende das Google Maps-API, um eine Karte voller Marker zu erstellen, aber ich möchte, dass sich ein Marker von den anderen abhebt. Das Einfachste, was ich denke, wäre, die Farbe des Markers auf Blau anstatt auf Rot zu ändern. Ist das eine einfache Sache oder muss ich irgendwie ein ganz neues Icon erstellen? Wenn ich ein neues Symbol erstellen muss, was ist der einfachste Weg?

Answer 1

Da Karten v2 veraltet ist, sind Sie wahrscheinlich interessiert in v3 Karten: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

Für v2 Karten:

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

Sie würden eine Reihe von Logik alles tun, die 'normale' Stifte und eine andere, die die "speziellen" Stifte verwendet, die den neuen definierten Marker verwenden.

Answer 2

MapIconMaker: eine Bibliothek für Google Maps v2

Eine Möglichkeit, die MapIconMaker zu verwenden ist. Es gibt ein Beispiel here. Google Maps Standardsymbole sind 20px Breite und 34px Höhe, so könnte man so etwas wie diese verwenden zu emulieren:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"}); 
var marker = new GMarker(map.getCenter(), {icon: newIcon}); 

Sie könnten sogar in irgendeiner Funktion wickeln Sie es Dinge noch einfacher auf sich selbst zu machen:

function getIcon(color) { 
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color}); 
} 

Das verwende ich persönlich für alle Marker, die ich erstelle. Ich bevorzuge die Möglichkeit, die Farben einer Laune zu ändern.

Aktualisierung: Die Hex-Farbe des Standardsymbols ist "# FE7569". Außerdem können Sie Image auf einem Marker setzen, anstatt einen neuen Marker mit einem neuen Symbol zu erstellen. Wenn Sie also eine Funktion markieren Sie mit so etwas wie dies gehen könnte, um die Funktion oben mit:

function highlightMarker(marker, highlight) { 
    var color = "#FE7569"; 
    if (highlight) { 
     color = "#0000FF"; 
    } 
    marker.setImage(getIcon(color).image); 
} 

StyledMarker: eine Bibliothek für Google Maps

v3

Da V2 irgendwann durch V3 ersetzt wurde vor dachte ich, Ich sollte diese Antwort aktualisieren. Ich habe eine Bibliothek für benutzerdefinierte Markierungen erstellt, die in der V3-Dienstprogrammbibliothek gefunden werden kann. Es ermöglicht verschiedene Farben und Formen, und Sie können auch Text auf dem Marker platzieren. Es funktioniert mit der Google Charts-API, die Methoden zum Erstellen von Google Maps-Typ-Markern bietet. Schauen Sie sich den Quellcode an, wenn Sie die Google Charts API lieber direkt verwenden möchten.

Die Sache mit dieser Bibliothek ist jedoch, dass sie die anklickbaren Regionen dieser Markerbilder für Sie definiert, so dass zum Beispiel die längere Blase mit Text die anklickbaren Regionen hat, die man erwartet, wie this example.

Answer 3

Mit der Version 3 des Google Maps API, der einfachste Weg, dies zu tun durch Greifen ein eigenes Icon-Set sein kann, wie derjenige, der Benjamin Keen hier geschaffen hat:

http://www.benjaminkeen.com/?p=105

Wenn Sie setzen all diese Symbole an der gleichen Stelle wie Ihre Karte Seite können Sie eine Markierung einfach über die entsprechende Symbol Option kolorieren beim Erstellen:

var beachMarker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: 'brown_markerA.png' 
}); 

das ist super-leicht und ist der Ansatz, den ich bin mit für das Projekt arbeite ich momentan.

Answer 4

Ich persönlich denke, dass die Symbole, die von der Google Charts API erzeugt werden, gut aussehen und einfach dynamisch angepasst werden können.

Siehe meine Antwort auf Google Maps API 3 - Custom marker color for default (dot) marker

Answer 5

Der einfachste Weg, ich fand, ist BitmapDescriptorFactory.defaultMarker() zu verwenden, die documentation auch ein Beispiel für die Einstellung der Farbe. Von meinem eigenen Code:

MarkerOptions marker = new MarkerOptions() 
      .title(formatInfo(data)) 
      .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE)) 
      .position(new LatLng(data.getLatitude(), data.getLongitude())) 

Answer 6

Sie benötigen keine benutzerdefinierten Bibliotheken für Google Maps v3.

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)); 
var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(0,0), 
      map: map, 
      icon: pinImage, 
      shadow: pinShadow 
     }); 

von Matt Burns Das funktioniert ab Oktober 2014 aber ist veraltet.