API de Google Maps 3: color de marcador personalizado para el marcador predeterminado (punto)

282

He visto muchas otras preguntas similares a esta ( aquí , aquí y aquí ), pero todas han aceptado respuestas que no resuelven mi problema. La mejor solución que he encontrado para el problema es la biblioteca StyledMarker , que te permite definir colores personalizados para los marcadores, pero no puedo hacer que use el marcador predeterminado (el que obtienes cuando haces una búsqueda en Google Maps - con un punto en el medio), solo parece proporcionar marcadores con una letra o un ícono especial.

jackocnr
fuente

Respuestas:

533

Puede solicitar dinámicamente imágenes de icono de la API de gráficos de Google con las URL:

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

Que se ve así: color predeterminadola imagen es de 21x34 píxeles y la punta del pin está en posición (10, 34)

Y también querrá una imagen de sombra separada (para que no se superponga con los iconos cercanos):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

Que se ve así: ingrese la descripción de la imagen aquíla imagen es de 40x37 píxeles y la punta del pin está en posición (12, 35)

Cuando construye sus MarkerImages , necesita establecer el tamaño y los puntos de anclaje en consecuencia:

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

Luego puede agregar el marcador a su mapa con:

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

Simplemente reemplace "FE7569" con el código de color que busca. P.ej:color predeterminadoverdeamarillo

Crédito debido a Jack B Nimble por la inspiración;)

quemaduras mate
fuente
36
Aunque realmente me gusta esta respuesta, la API de gráficos de Google con respecto a la infografía (el enlace que proporcionó anteriormente) ha quedado en desuso.
johntrepreneur
3
No estoy seguro de si esto es nuevo, pero puede agregar _withshadow para que la sombra se incorpore automáticamente. Ejemplo, chart.apis.google.com/…
Lionel Chan
@LionelChan, puedes, pero no se alinea exactamente y también se superpondrá sobre otros íconos. Debes asegurarte de que todas las sombras se dibujan antes que los pines.
Matt quema el
1
@mattburns bien, podría ser una solución más fácil para algunos, por qué no;)
Lionel Chan
1
Esta forma de crear marcadores está en desuso a partir del 14 de marzo de 2019. Ya no funcionará: error502
Jonny
372

Si usa Google Maps API v3, puede usar, setIconpor ejemplo,

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:

Use el siguiente código para actualizar los marcadores predeterminados con diferentes colores.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
Miguel
fuente
50
Esto es excelente. Si desea más íconos y opciones de color, puede encontrarlos aquí: sites.google.com/site/gmapsdevelopment
Johnny Oshika
121

Aquí hay una buena solución usando la API de Gooogle Maps. Sin servicio externo, sin biblioteca adicional. Y permite formas personalizadas y múltiples colores y estilos. La solución utiliza marcadores vectoriales, que la API de googlemaps llama Símbolos .

Además de los pocos y limitados símbolos predefinidos, puede diseñar cualquier forma de cualquier color especificando una cadena de ruta SVG ( Spec ).

Para usarlo, en lugar de configurar la opción de marcador de 'icono' en la url de la imagen, lo configura en un diccionario que contiene las opciones de símbolos. Como ejemplo, logré crear un símbolo que es bastante similar al marcador estándar:

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

Marcador de vectores

Si tiene cuidado de mantener el punto clave de forma en 0,0, evite tener que definir los parámetros de centrado del icono de marcador. Otro ejemplo de ruta, el mismo marcador sin el punto:

    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',

Marcador vectorial sin puntos

Y aquí tienes una bandera de color muy simple y fea:

    path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

Bandera del vector

También puede crear las rutas utilizando una herramienta visual como Inkscape (GNU-GPL, multiplataforma). Algunas sugerencias útiles:

  • La API de Google solo acepta una ruta única, por lo que debe convertir cualquier otro objeto (cuadrado, círculo ...) en una ruta y unirlos como uno solo. Ambos comandos en el menú Ruta.
  • Para mover la ruta a (0,0), vaya al modo Edición de ruta (F2), seleccione todos los nodos de control y arrástrelos. Mover el objeto con F1 no cambiará las coordenadas del nodo de ruta.
  • Para asegurarse de que el punto de referencia esté en (0,0), puede seleccionarlo solo y editar las coordenadas manualmente en la barra de herramientas superior.
  • Después de guardar el archivo SVG, que es un XML, ábralo con un editor, busque el elemento svg: path y copie el contenido del atributo 'd'.
vokimon
fuente
44
Esta es una buena respuesta. Si alguien puede encontrar un camino que se parezca al pin real, esta será una gran respuesta
mkoryak
2
Esta solución es mejor que cargar la imagen pin desde la URL. Porque, si tiene varios Pines en un solo Mapa, aumentará el tiempo de Carga del Mapa.
Ahsan
1
@mkoryak agregué algunos consejos sobre cómo dibujar esos caminos usted mismo con una herramienta gráfica como inkscape. Si desea hacer coincidir cualquier PNG existente, simplemente impórtelo en Inkscape y úselo como referencia para la ruta.
vokimon
¿Se puede poner algo dentro del globo que no sea un punto?
Ross Rogers
1
Lo dibujas El único inconveniente es que el pin y el punto deben ser todos la misma ruta. Eso significa que el punto, no es un punto sino un agujero. Cualquiera sea la forma que use en su lugar, el punto será un agujero en la forma del alfiler con esa forma. (Puede ver a través de él) Sería bueno combinar varias formas de colores con diferentes colores, pero como sé, solo admite una ruta única (no continua).
vokimon
14

Bueno, lo más cercano que he podido obtener con StyledMarker es esto .

Sin embargo, la viñeta en el medio no es tan grande como la predeterminada. La clase StyledMarker simplemente crea esta url y le pide a la API de Google que cree el marcador .

Del ejemplo de uso de la clase, use "% E2% 80% A2" como texto, como en:

var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});

Deberá modificar StyledMarker.js para comentar las líneas:

  if (text_) {
    text_ = text_.substr(0,2);
  }

ya que esto recortará la cadena de texto a 2 caracteres.

Alternativamente, puede crear imágenes de marcador personalizadas basadas en la predeterminada con los colores que desee y anular el marcador predeterminado con un código como este:

marker = new google.maps.Marker({
  map:map,
  position: latlng,
  icon: new google.maps.MarkerImage(
    'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
    new google.maps.Size(24, 24),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 24)
  )
});
Jack B Nimble
fuente
gracias por la respuesta, pero ya intenté volver a crear el punto usando caracteres ascii, pero no puedes lograr que se vea igual, y no quiero conformarme con algo notablemente diferente: parece realmente poco profesional. y sí, la imagen del marcador personalizado ha sido mi solución actual (tomé el marcador rojo predeterminado desde aquí: maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png , que abrí en GIMP y utilicé la herramienta para colorear), pero esto tampoco es perfecto.
jackocnr
Estoy aceptando esta respuesta, ya que es la única, y supongo que no hay otra solución.
jackocnr
Lo siento, no podría ser más útil. A veces la única respuesta es menos deseable.
Jack B Nimble
12

He extendido un poco la respuesta de vokimon , haciéndolo un poco más conveniente para cambiar otras propiedades también.

function customIcon (opts) {
  return Object.assign({
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
    fillColor: '#34495e',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1,
  }, opts);
}

Uso:

marker.setIcon(customIcon({
  fillColor: '#fff',
  strokeColor: '#000'
}));

O al definir un nuevo marcador:

const marker = new google.maps.Marker({
  position: {
    lat: ...,
    lng: ...
  },
  icon: customIcon({
    fillColor: '#2ecc71'
  }),
  map: map
});
Puntilla
fuente
11

Hola, puedes usar el icono como SVG y establecer colores. Ver este código

/*
 * declare map and places as a global variable
 */
var map;
var places = [
    ['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
    ['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
    ['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
    ['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
    ['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    var map = new google.maps.Map(document.getElementById("map_div"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    /*
     * create infowindow (which will be used by markers)
     */
    var infoWindow = new google.maps.InfoWindow();
    /*
     * create bounds (which will be used auto zoom map)
     */
    var bounds = new google.maps.LatLngBounds();

    /*
     * marker creater function (acts as a closure for html parameter)
     */
    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        bounds.extend(options.position);
        if (html) {
            google.maps.event.addListener(marker, "click", function () {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
                map.setZoom(map.getZoom() + 1)
                map.setCenter(marker.getPosition());
            });
        }
        return marker;
    }

    /*
     * add markers to map
     */
    for (var i = 0; i < places.length; i++) {
        var point = places[i];
        createMarker({
            position: new google.maps.LatLng(point[2], point[3]),
            map: map,
            icon: {
                path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
                scale: 0.6,
                strokeWeight: 0.2,
                strokeColor: 'black',
                strokeOpacity: 1,
                fillColor: point[4],
                fillOpacity: 0.85,
            },
        }, point[1]);
    };
    map.fitBounds(bounds);
});
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>

Pablo Veintimilla Vargas
fuente
6

desde la versión 3.11 de la API de Google Maps, el Iconobjeto reemplaza MarkerImage. El icono admite los mismos parámetros que MarkerImage. Incluso me pareció un poco más sencillo.

Un ejemplo podría verse así:

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

para más información consulte este sitio

5mark
fuente
1
no una respuesta a esta pregunta esto, debe ser un comentario
mkoryak
4

En Internet Explorer , esta solución no funciona en SSL.

Uno puede ver el error en la consola como:

SEC7111 : la seguridad HTTPS se ve comprometida por esto ,

Solución alternativa : como uno de los usuarios aquí sugirió reemplazar chart.apis.google.com por chart.googleapis.com por la ruta URL para evitar errores SSL.

devgal
fuente
3

Como otros han mencionado, la respuesta de vokimon es excelente, pero desafortunadamente Google Maps es un poco lento cuando hay muchos marcadores basados ​​en SymbolPath / SVG a la vez.

Parece que usar un URI de datos es mucho más rápido, aproximadamente a la par con PNG.

Además, dado que es un documento SVG completo, es posible usar un círculo lleno apropiado para el punto. La ruta se modifica para que ya no se desplace a la esquina superior izquierda, por lo que el ancla necesita ser definida.

Aquí hay una versión modificada que genera estos marcadores:

var coloredMarkerDef = {
    svg: [
        '<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
            '<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
            '<circle cx="11" cy="11" r="3"/>',
        '</svg>'
    ].join(''),
    anchor: {x: 11, y: 41},
    size: {width: 22, height: 41}
};

var getColoredMarkerSvg = function(color) {
    return coloredMarkerDef.svg.replace('{fillColor}', color);
};

var getColoredMarkerUri = function(color) {
    return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};

var getColoredMarkerIcon = function(color) {
    return {
        url: getColoredMarkerUri(color),
        anchor: coloredMarkerDef.anchor,
        size: coloredMarkerDef.size,
        scaledSize: coloredMarkerDef.size
    }
};

Uso:

var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(latitude, longitude),
    icon: getColoredMarkerIcon("#FFF")
});

La desventaja, al igual que una imagen PNG, es que se puede hacer clic en todo el rectángulo. En teoría, no es demasiado difícil rastrear la ruta SVG y generar un polígono MarkerShape .

Beto
fuente
2

Puede usar este código, funciona bien.

 var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>

 var marker = new google.maps.Marker({
            position: yourlatlong,
            icon: pinImage,
            map: map
        });
khurram
fuente
2

Combine un marcador basado en símbolos cuya ruta dibuje el contorno, con un carácter '●' para el centro. Puede sustituir el punto con otro texto ('A', 'B', etc.) según lo desee.

Esta función devuelve opciones para un marcador con un texto dado (si lo hay), color de texto y color de relleno. Utiliza el color del texto para el contorno.

function createSymbolMarkerOptions(text, textColor, fillColor) {
    return {
        icon: {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: fillColor,
            fillOpacity: 1,
            strokeColor: textColor,
            strokeWeight: 1.8,
            labelOrigin: { x: 0, y: -30 }
        },
        label: {
            text: text || '●',
            color: textColor
        }
    };
}
Edward Brey
fuente
1

Intento dos formas de crear el marcador de mapa de Google personalizado, este código de ejecución utilizado canvg.js es la mejor compatibilidad para el navegador. El código comentado no es compatible con IE11 actualmente.

var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.070
    }
  });
  var markerOption = {
    latitude: 59.327,
    longitude: 18.067,
    color: "#" + "000",
    text: "ha"
  };
  marker = createMarker(markerOption);
  marker.setMap(map);
  marker.addListener('click', changeColorAndText);
};

function changeColorAndText() {
  var iconTmpObj = createSvgIcon( "#c00", "ok" );
  marker.setOptions( {
                icon: iconTmpObj
            } );
};

function createMarker(options) {
  //IE MarkerShape has problem
  var markerObj = new google.maps.Marker({
    icon: createSvgIcon(options.color, options.text),
    position: {
      lat: parseFloat(options.latitude),
      lng: parseFloat(options.longitude)
    },
    draggable: false,
    visible: true,
    zIndex: 10,
    shape: {
      coords: CustomShapeCoords,
      type: 'poly'
    }
  });

  return markerObj;
};

function createSvgIcon(color, text) {
  var div = $("<div></div>");

  var svg = $(
    '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
    '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
    '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
    '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
    '</svg>'
  );
  div.append(svg);

  var dd = $("<canvas height='50px' width='50px'></cancas>");

  var svgHtml = div[0].innerHTML;

  //todo yao gai bu dui
  canvg(dd[0], svgHtml);

  var imgSrc = dd[0].toDataURL("image/png");
  //"scaledSize" and "optimized: false" together seems did the tricky ---IE11  &&  viewBox influent IE scaledSize
  //var svg = '<svg width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
  //    + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
  //    + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
  //    + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
  //    + '</svg>';
  //var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

  var iconObj = {
    size: new google.maps.Size(32, 43),
    url: imgSrc,
    scaledSize: new google.maps.Size(32, 43)
  };

  return iconObj;
};
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Your Custom Marker </title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
    <script src="https://canvg.github.io/canvg/canvg.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>

</html>

Dom
fuente
1

Intenté durante mucho tiempo mejorar el marcador dibujado de vokimon y hacerlo más similar al de Google Maps (y lo logré). Este es el código que obtuve:

let circle=true;

path = 'M 0,0  C -0.7,-9 -3,-14 -5.5,-18.5 '+   
'A 16,16 0 0,1 -11,-29 '+  
'A 11,11 0 1,1 11,-29 '+  
'A 16,16 0 0,1 5.5,-18.5 '+  
'C 3,-14 0.7,-9 0,0 z '+  
['', 'M -2,-28 '+  
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];   

También lo escalé en 0.8.

Nataliia Khotiaintseva
fuente
0

cámbielo a chart.googleapis.com para la ruta, de lo contrario SSL no funcionará

usuario2465583
fuente
0

Utilizando Swift y Google Maps Api v3, esta fue la forma más fácil en que pude hacerlo:

icon = GMSMarker.markerImageWithColor(UIColor.blackColor())

Espero que ayude a alguien.

JoeGalind
fuente
0

Estos son marcadores circulares personalizados

pequeño_rojo:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC

pequeño_amarillo:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==

pequeño_verde:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==

pequeño_azul:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC

small_purple:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==

Son imágenes de 9x9 png.

Una vez que estén en su página, puede arrastrarlos y tendrá el archivo png real.

Fawad Ali
fuente
0

Puedes usar el código de color también.

 const marker: Marker = this.map.addMarkerSync({
    icon: '#008000',
    animation: 'DROP',
    position: {lat: 39.0492127, lng: -111.1435662},
    map: this.map,
 });
shanthan
fuente
0

A veces algo realmente simple, se puede responder complejo. No estoy diciendo que ninguna de las respuestas anteriores sea incorrecta, pero simplemente aplicaría, que se puede hacer tan simple como esto:

Sé que esta pregunta es antigua, pero si alguien solo quiere cambiar a color de marcador o marcador, consulte la documentación: https://developers.google.com/maps/documentation/android-sdk/marker

cuando agrega su marcador, simplemente establezca la propiedad de icono:

GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
    .position(latLng)
    .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

Hay 10 colores predeterminados para elegir . Si eso no es suficiente (la solución simple), entonces probablemente elegiría las respuestas más complejas dadas en las otras respuestas, para satisfacer una necesidad más compleja.

PD: escribí algo similar en otra respuesta y, por lo tanto, debería referirme a esa respuesta, pero la última vez que lo hice, me pidieron que publicara la respuesta ya que era muy corta (como esta).

badaboomskey
fuente