Google Maps API 3 – cor do marcador personalizado para o marcador padrão (ponto)

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

Você pode solicitar dinamicamente imagens de icons da api dos charts do Google com as URLs:

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

Que se parece com isso: cor padrão a imagem tem 21×34 pixels e a ponta do pino está na posição (10, 34)

E você também desejará uma imagem de sombra separada (para que ela não se sobreponha a icons próximos):

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

Que se parece com isso: insira a descrição da imagem aqui a imagem é 40×37 pixels e a ponta do pino está na posição (12, 35)

Ao construir seu 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 então 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 colors que você está procurando. Por exemplo: cor padrãoverdeamarelo

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

Se você usa a API do Google Maps v3, pode usar o setIcon por exemplo

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

Ou como parte do marcador init:

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

Outras colors:

  • Marcador azul
  • insira a descrição da imagem aqui Marcador vermelho
  • insira a descrição da imagem aqui Marcador roxo
  • insira a descrição da imagem aqui Marcador amarelo
  • insira a descrição da imagem aqui Marcador verde

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

 (BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE) 

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

Além dos poucos e limitados símbolos pré-definidos, você pode criar qualquer forma de qualquer cor, especificando uma seqüência de caminho SVG ( Spec ).

Para usá-lo, em vez de definir a opção de marcador de “ícone” como o URL da imagem, defina-o como um dictionary que contenha as opções de símbolo. Como exemplo, consegui criar um símbolo que é 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ê tiver o cuidado de manter o ponto chave da forma em 0,0, evite 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 de vetor sem ponto

E aqui você tem uma bandeira 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', 

Bandeira de vetor

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

  • A API do Google apenas aceita um único caminho, por isso você precisa transformar qualquer outro object (quadrado, cercle …) em um caminho e uni-los como um único. Ambos os comandos no menu Path.
  • Para mover o caminho para o (0,0), vá para o modo Path Edit (F2), selecione todos os nós de controle e arraste-os. Mover o object com F1 não altera as coordenadas do nó do caminho.
  • Para garantir que o ponto de referência esteja em (0,0), você pode selecioná-lo sozinho e editar as coordenadas manualmente na barra de ferramentas superior.
  • Depois de 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’.

Bem, a coisa mais próxima que consegui com o StyledMarker é essa .

A bala no meio não é tão grande quanto a padrão. A class StyledMarker simplesmente cria esse URL e solicita que a API do Google crie o marcador .

A partir do exemplo de uso de class, use “% 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); } 

como isso irá cortar a seqüência de texto para 2 caracteres.

Alternativamente, você pode criar imagens de marcadores personalizados com base no padrão com as colors desejadas e replace 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) ) }); 

Oi você pode usar o ícone como SVG e definir colors. Veja este código

 /* * declare map and places as a global variable */ var map; var places = [ ['Place 1', "

Title 1

", -0.690542, -76.174856,"red"], ['Place 2', "

Title 2

", -5.028249, -57.659052,"blue"], ['Place 3', "

Title 3

", -0.028249, -77.757507,"green"], ['Place 4', "

Title 4

", -0.800101286, -76.78747820,"orange"], ['Place 5', "

Title 5

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

Eu estendi a resposta do vokimon um pouco, tornando-o um pouco mais conveniente para alterar 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 quando definir um novo marcador:

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

desde a versão 3.11 da API do Google Maps, o object Icon substitui o MarkerImage . Ícone suporta os mesmos parâmetros do MarkerImage. Eu até achei que fosse um pouco mais direto.

Um exemplo poderia 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

No Internet Explorer , essa 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 replace chart.apis.google.com para chart.googleapis.com pelo caminho do URL para evitar erros de SSL.

Você pode usar este código funciona bem.

  var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");
var marker = new google.maps.Marker({ position: yourlatlong, icon: pinImage, map: map });

Eu tento de duas maneiras para criar o marcador de mapa personalizado google, este código de execução usado canvg.js é a melhor compatibilidade para o navegador.o Código Comentada não é compatível com o IE11 urrently.

 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 = $("
"); var svg = $( '' + '' + '' + '' + text + '' + '' ); div.append(svg); var dd = $(""); 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 = '' // + '' // + '' // + '' + text + '' // + ''; //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; };
     Your Custom Marker     

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

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

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

Usando o Swift e o Google Maps Api v3, essa foi a maneira mais fácil de fazer isso:

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

Espero que ajude alguém.

Estes são marcadores circulares de traje

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 9×9 png.

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

Eu tentei por muito tempo melhorar o marcador desenhado por vokimon e torná-lo mais similar ao Google Maps (e 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)]; 

Eu também usei 0,8.