Javascript, Cambiar el color del marcador del mapa de Google

Question

Puedo saber una forma de cambiar el color del marcador Google Map a través de Javascript ... Soy nuevo en esto y cualquier ayuda sería muy apreciada. Gracias.

que utiliza el código siguiente para crear un marcador

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

En la API de Google Maps v3 puede intentar cambiar icono del marcador. Por ejemplo para el verde icono de uso:

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

o como parte de init marcador:

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

Otros colores:

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

Etc.

Answer 2

Usted puede utilizar el strokeColor propiedad:

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

Ver this page para otras posibilidades.

Answer 3

Puede usar este código, funciona bien.

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

tengo 4 barcos para establecer en un solo mapa, así que utilizo el ejemplo de desarrolladores de Google y luego torcí

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

En la función de abajo me puse 3 más opciones de color:

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 en el PARA bramido puse un color para cada buque:

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 
} 

El resultado final:

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

Answer 5

sugiere emplear la Google Charts API porque se puede especificar el texto, el color del texto, color de relleno y el color del contorno, todos usan códigos de color hexadecimal, por ejemplo # FF0000 para rojo. Se le puede llamar de la siguiente manera:

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

Entonces, cuando se crea el marcador que acaba de establecer la propiedad icono como tal, donde las variables Mycolor son valores hexadecimales (menos el signo de hash):

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

Puede usar http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000, que es un poco más fácil de descifrar, como una URL alternativa si solo necesita establecer texto y color de relleno.

La respuesta de khurram se refiere a un sitio de terceros que redirige a la API de Google Charts. Esto significa que si esa persona toma su servidor, se te aplica una manguera. Prefiero tener la flexibilidad que ofrece la API de Google, así como la fiabilidad de ir directamente a Google. Solo asegúrate de especificar un valor para cada uno de los colores o no funcionará.

Answer 6

puede utilizar la tabla de API de Google y generar cualquier color con código RGB sobre la marcha:

ejemplo: marcador de color #ddd:

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

incluyen como se ha dicho 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);

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