API do Google Maps 3 - Cor do marcador personalizado para o marcador padrão (ponto)

282

Eu já vi muitas outras perguntas semelhantes a essa ( aqui , aqui e aqui ), mas todas aceitaram respostas que não resolvem o meu problema. A melhor solução que encontrei para o problema é a biblioteca StyledMarker , que permite definir cores personalizadas para marcadores, mas não consigo usar o marcador padrão (o que você obtém ao fazer uma pesquisa no Google Maps - com um ponto no meio), apenas parece fornecer aos marcadores uma letra ou um ícone especial.

jackocnr
fonte

Respostas:

533

Você pode solicitar dinamicamente imagens de ícones da API do Google Maps com os URLs:

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

É assim: cor padrãoa imagem tem 21x34 pixels e a ponta do alfinete está na posição (10, 34)

E você também deseja uma imagem de sombra separada (para que não se sobreponha a ícones próximos):

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

É assim: insira a descrição da imagem aquia imagem tem 40x37 pixels e a ponta do pino está na posição (12, 35)

Ao criar suas MarkerImage s, você precisa definir o tamanho e os pontos de ancoragem de acordo:

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

Você pode adicionar o marcador ao seu mapa com:

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

Simplesmente substitua "FE7569" pelo código de cor que você procura. Por exemplo:cor padrãoverdeamarelo

Crédito devido a Jack B Nimble pela inspiração;)

queimaduras mate
fonte
36
Embora eu realmente goste desta resposta, a API do Google Maps em relação aos Infográficos (o link que você forneceu acima) foi preterida.
johntrepreneur
3
Não tenho certeza se isso é novo, mas você pode adicionar _withshadow para que a sombra seja incorporada automaticamente. Exemplo, chart.apis.google.com/…
Lionel Chan
@LionelChan, você pode, mas não se alinha exatamente e também se sobrepõe a outros ícones. Você deseja garantir que todas as sombras sejam desenhadas antes dos pinos.
Matt queima
1
@mattburns bem que poderia ser uma solução mais fácil para alguns, por que não;)
Lionel Chan
1
Essa maneira de criar marcadores foi descontinuada a partir de 14 de março de 2019. Ela não funcionará mais: error502
Jonny
372

Se você usa a API do Google Maps v3, pode usar, setIconpor exemplo,

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

Ou como parte do init do marcador:

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

Outras cores:

Use o seguinte trecho de código para atualizar os marcadores padrão com cores diferentes.

(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
Mike
fonte
50
Isto e excelente. Se você quiser mais ícones e opções de cores, você pode encontrá-los aqui: sites.google.com/site/gmapsdevelopment
Johnny Oshika
121

Aqui está uma boa solução usando a própria API do Gooogle Maps. Nenhum serviço externo, nenhuma biblioteca extra. E permite formas personalizadas e várias cores e estilos. A solução usa marcadores vetoriais, que a API do googlemaps chama de Símbolos .

Além dos poucos e predefinidos símbolos predefinidos, você pode criar qualquer formato de qualquer cor especificando uma sequência de caminho SVG ( Spec ).

Para usá-lo, em vez de definir a opção do marcador 'ícone' como o URL da imagem, você o define como um dicionário que contém as opções de símbolo. Como exemplo, consegui criar um símbolo bastante semelhante ao marcador padrão:

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 vetor

Se você for cuidadoso em manter o ponto chave da forma em 0,0, evite ter que definir os parâmetros de centralização do ícone do marcador. Outro exemplo de caminho, o mesmo marcador sem o ponto:

    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 vetorial sem pontos

E aqui você tem uma bandeira colorida muito simples e feia:

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

Vector Flag

Você também pode criar os caminhos usando uma ferramenta visual como o Inkscape (GNU-GPL, multiplataforma). Algumas dicas úteis:

  • A API do Google aceita apenas um caminho, portanto, você deve transformar qualquer outro objeto (quadrado, cercado ...) em um caminho e juntá-los como um único. Ambos os comandos no menu Caminho.
  • Para mover o caminho para (0,0), vá para o modo Path Edit (F2) selecione todos os nós de controle e arraste-os. Mover o objeto com F1 não altera as cordas do nó do caminho.
  • Para garantir que o ponto de referência esteja em (0,0), você pode selecioná-lo sozinho e editar as cordas manualmente na barra de ferramentas superior.
  • Após salvar o arquivo SVG, que é um XML, abra-o com um editor, procure o elemento svg: path e copie o conteúdo do atributo 'd'.
vokimon
fonte
4
esta é uma boa resposta Se alguém pode vir até com um caminho que se parece com o pino real, este será um grande resposta
mkoryak
2
Esta solução é melhor do que carregar a imagem pin do URL. Porque, se você tiver vários pinos em um único mapa, isso aumentará o tempo de carregamento do mapa.
Ahsan 23/07
1
@mkoryak Adicionei algumas dicas sobre como desenhar esses caminhos com uma ferramenta gráfica como o inkscape. Se você deseja corresponder a qualquer PNG existente, basta importá-lo para o inkscape e usá-lo como referência para o caminho.
vokimon
Alguém pode colocar algo no balão que não seja um ponto?
Ross Rogers
1
Você desenha. A única desvantagem é que o pino e o ponto devem estar todos no mesmo caminho. Isso significa que o ponto não é um ponto, mas um buraco. Qualquer que seja a forma que você use, o ponto será um buraco na forma de alfinete com essa forma. (Você vê através dele) Seria bom combinar várias formas coloridas com cores diferentes, mas como eu sei, apenas suporta um caminho único (não contínuo).
vokimon
14

Bem, a coisa mais próxima que pude obter com o StyledMarker é esta .

A bala no meio não é tão grande quanto a padrão. A classe StyledMarker simplesmente cria esse URL e solicita à API do Google para criar o marcador .

A partir do exemplo do uso de classe utilização "% E2% 80% A2" como seu texto, como em:

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

Você precisará modificar o StyledMarker.js para comentar as linhas:

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

pois isso cortará a sequência de texto em 2 caracteres.

Como alternativa, você pode criar imagens de marcador personalizadas com base na cor padrão com as cores desejadas e substituir o marcador padrão por um 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
fonte
obrigado pela resposta, mas eu já tentei recriar o ponto usando caracteres ascii, mas você simplesmente não consegue parecer o mesmo, e eu não quero me contentar com algo visivelmente diferente - parece realmente pouco profissional. e sim, a imagem do marcador personalizado foi minha solução atual (peguei o alfinete vermelho padrão aqui: maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png , que abri no GIMP e usei a ferramenta de coloração), mas isso também não é perfeito.
jackocnr
Estou aceitando esta resposta, pois é a única e acho que não há outra solução.
jackocnr
Desculpe, não pude ser mais útil. Às vezes, a única resposta é menos desejável.
Jack B rigoroso
12

Eu tenho estendido a resposta de vokimon um pouco, tornando-o um pouco mais conveniente para mudar outras propriedades também.

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

Ou ao definir um novo marcador:

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

Oi, você pode usar o ícone como SVG e definir cores. Veja 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
fonte
6

desde a versão 3.11 da API do google maps, o Iconobjeto substituiMarkerImage . O ícone suporta os mesmos parâmetros que MarkerImage. Até achei um pouco mais direto.

Um exemplo pode ser assim:

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 mais informações consulte este site

5mark
fonte
1
não uma resposta deste a esta pergunta, deve ser um comentário
mkoryak
4

No Internet Explorer , esta solução não funciona no ssl.

Pode-se ver o erro no console como:

SEC7111 : A segurança HTTPS é comprometida por isso ,

Solução alternativa : como um dos usuários sugeriu aqui, substitua chart.apis.google.com por chart.googleapis.com pelo caminho do URL para evitar erros de SSL.

devgal
fonte
3

Como outros já mencionaram, a resposta de vokimon é ótima, mas infelizmente o Google Maps é um pouco lento quando existem muitos marcadores SymbolPath / SVG ao mesmo tempo.

Parece que o uso de um URI de dados é muito mais rápido, aproximadamente a par dos PNGs.

Além disso, como é um documento SVG completo, é possível usar um círculo preenchido adequado para o ponto. O caminho é modificado para que não seja mais deslocado para o canto superior esquerdo, portanto a âncora precisa ser definida.

Aqui está uma versão modificada que gera esses 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")
});

A desvantagem, assim como uma imagem PNG, é que todo o retângulo é clicável. Em teoria, não é muito difícil rastrear o caminho SVG e gerar um polígono MarkerShape .

Prumo
fonte
2

Você pode usar esse código que funciona bem.

 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
fonte
2

Combine um marcador baseado em símbolo cujo caminho desenha o contorno, com um caractere '●' para o centro. Você pode substituir o ponto por outro texto ('A', 'B' etc.), conforme desejado.

Essa função retorna opções para um marcador com um determinado texto (se houver), cor do texto e cor de preenchimento. Ele usa a cor do texto para o 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
fonte
1

Eu tento duas maneiras de criar o marcador de mapa do google personalizado, esse código de execução usado canvg.js é a melhor compatibilidade para o navegador. O código comentado não é compatível com o IE11 com urgência.

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>

Sol
fonte
1

Tentei por um longo tempo melhorar o marcador desenhado do vokimon e torná-lo mais semelhante ao do Google Maps (e praticamente bem-sucedido). Este é o código que recebi:

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

Também o reduzi em 0,8.

Nataliia Khotiaintseva
fonte
0

altere-o para chart.googleapis.com para o caminho, caso contrário, o SSL não funcionará

user2465583
fonte
0

Usando o swift e o Google Maps Api v3, foi a maneira mais fácil de fazê-lo:

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

espero que ajude alguém.

JoeGalind
fonte
0

Esses são marcadores circulares personalizados

small_red:

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

small_yellow:

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

small_green:

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

small_blue:

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==

São imagens png 9x9.

Quando estiverem na sua página, basta arrastá-los e você terá o arquivo png real.

Fawad Ali
fonte
0

Você também pode usar o código de cores.

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

Às vezes, algo realmente simples, pode ser respondido complexo. Não estou dizendo que nenhuma das respostas acima esteja incorreta, mas eu aplicaria apenas que isso pode ser feito de maneira simples:

Sei que essa pergunta é antiga, mas se alguém quiser alterar a cor do alfinete ou do marcador, consulte a documentação: https://developers.google.com/maps/documentation/android-sdk/marker

quando você adiciona seu marcador, basta definir a propriedade do ícone:

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

Existem 10 cores padrão para você escolher . Se isso não for suficiente (a solução simples), eu provavelmente usaria o mais complexo dado nas outras respostas, atendendo a uma necessidade mais complexa.

ps: Eu escrevi algo semelhante em outra resposta e, portanto, devo me referir a essa resposta, mas na última vez que fiz isso, fui solicitado a postar a resposta, pois era tão curta (como esta).

badaboomskey
fonte