Javascript, Ändern Google Map Marker Farbe

Question

Darf ich eine Möglichkeit, die Google Map Marker Farbe über Javascript ändern .. Ich bin neu in diesem und jeder Hilfe wäre sehr dankbar, danke.

habe ich den folgenden Code ein Marker

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

Answer 1

In Google Maps-API erstellen v3 Sie Markierungssymbol zu ändern versuchen. Zum Beispiel für grüne Symbol Verwendung:

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

oder als Teil 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

Etc.

Answer 2

können Sie verwenden, um die strokeColor Eigenschaft:

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

Siehe this page für andere Möglichkeiten.

Answer 3

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

see Example here

Answer 4

Ich habe 4 Schiffe auf einer einzigen Karte zu setzen, so dass ich das Beispiel Google Developers und dann

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

In der Funktion verdreht unten I 3 gesetzt mehr Farboptionen:

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

An d in der FOR unten ich eine Farbe für jedes Schiff ein:

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

Answer 5

Ich schlage vor, mit der Google Charts API, weil Sie den Text, Textfarbe angeben, Füllfarbe und Umrissfarbe, alle unter Verwendung von Hex-Farbcodes, z # FF0000 für rot. Sie können es nennen wie folgt:

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

Dann, wenn Sie Ihre Marker erstellen Sie einfach auf das Symbol Eigenschaft als solche festgelegt, wo die myColor Variablen Hex-Werte (minus der Raute) sind:

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 http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000, die ein wenig einfacher zu entziffern ist, als alternative URL verwenden, wenn Sie nur Text und Füllfarbe festlegen müssen.

Khurrams Antwort bezieht sich auf eine Website von Drittanbietern, die zur Google Charts-API weiterleitet. Das heißt, wenn diese Person ihren Server herunterlädt, wird sie abgespritzt. Ich bevorzuge die Flexibilität, die die Google API bietet, sowie die Zuverlässigkeit, direkt zu Google zu gelangen. Stellen Sie nur sicher, dass Sie für jede Farbe einen Wert angeben, sonst funktioniert es nicht.

Answer 6

können Sie die Google Chart API verwenden, und jede Farbe mit RGB-Code on the fly generieren:

Beispiel: Marker mit #DDD Farbe:

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

umfassen wie oben erwähnt mit

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

Answer 7

var map_marker = $ (". Map-marker"). Untergeordnete ("img"). Attr ("src") var pinImage = neu google.maps.MarkerImage (map_marker);

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