Javascript, Modifica il colore dell'indicatore della mappa di google

Question

Posso conoscere un modo per modificare il colore dell'indicatore di Google Map tramite Javascript. Sono nuovo in questo e qualsiasi aiuto sarebbe molto apprezzato, grazie.

ho usato il seguente codice per creare un 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 v3 si può provare a cambiare l'icona marcatore. Ad esempio per l'uso icona verde:

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

o come parte di marcatore init:

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

Altri colori:

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

Ecc

Answer 2

È possibile utilizzare la proprietà strokeColor:

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

Vedere this page per altre possibilità.

Answer 3

È possibile utilizzare questo codice funziona correttamente.

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

ho 4 navi per impostare su una singola mappa, per cui uso l'esempio Google Developers e poi contorto

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

Nella funzione soffietto ho impostato 3 più opzioni di colore:

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

Un d nel FOR muggito ho impostato un colore per ogni nave:

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 
} 

Il risultato finale:

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

Answer 5

Io suggerisco di usare il Google Charts API perché è possibile specificare il testo, colore del testo, colore di riempimento e delineare il colore, usando tutti i codici esadecimali, ad es # FF0000 per il rosso. Si può chiamare come segue:

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

Poi, quando si crea il marcatore è sufficiente impostare la proprietà icona come tale, dove le variabili Mycolor sono valori esadecimali (meno il simbolo 'cancelletto):

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

È possibile utilizzare http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000, che è leggermente più semplice da decifrare, come URL alternativo se è necessario solo impostare il testo e il colore di riempimento.

La risposta di khurram si riferisce a un sito di terze parti che reindirizza all'API di Google Charts. Questo significa che se quella persona abbatte il loro server, tu verrai protetto. Preferisco avere la flessibilità offerta dall'API di Google e l'affidabilità di andare direttamente a Google. Assicurati solo di specificare un valore per ciascuno dei colori, altrimenti non funzionerà.

Answer 6

è possibile utilizzare la tabella API di Google e generare qualsiasi colore con il codice di rgb al volo:

esempio: marcatore con il colore #ddd:

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

comprendono come detto sopra con

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"). Children ("img"). Attr ("src") var pinImage = new google.maps.MarkerImage (map_marker);