marcadores - Javascript, cambiar el color del marcador del mapa de google

google.maps.marker color

Question

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

Usé el siguiente código 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 Google Maps API v3 puedes intentar cambiar el ícono de marcador. Por ejemplo, para el uso del icono verde:

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

O como parte del marcador init:

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

Me gustó mucho la respuesta dada por Bahadır Yagan, excepto que no me gustó depender de un conjunto limitado de iconos dados por Google o una API externa para generar mis iconos de marcador. Aquí está la solución inicial:

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

Y aquí está mi solución mejorada:

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

Quería un ícono de pin específico, así que hice uno con Inkscape, luego abrí el archivo SVG y copié la ruta svg en la ruta al código, pero esto funciona con cualquier ruta SVG que pones en el atributo "ruta" del icono de objeto

Aquí está el resultado:

Answer 3

Puede usar la propiedad 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
});

Vea esta página para otras posibilidades.

Answer 4

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

ver ejemplo aquí

Answer 5

Sugiero usar la API de Google Charts porque puede especificar el texto, el color del texto, el color de relleno y el color del contorno, todos usan códigos de color hexadecimal, por ejemplo, # FF0000 para el rojo. Puedes llamarlo 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;
}

Luego, cuando crea su marcador, simplemente establece la propiedad del icono como tal, donde las variables myColor son valores hexadecimales (menos el signo 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

Tengo 4 naves para establecer en un solo mapa, así que uso el ejemplo de Google Developers y luego lo retorcí

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

En la función siguiente, establecí 3 opciones de color más:

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

Y en el FOR abajo, configuré un color para cada barco:

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 7

puedes usar la API de Google Api y generar cualquier color con el código rgb sobre la marcha:

ejemplo: marcador con color #ddd:

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

incluir como se indicó anteriormente 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 8

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