JS Maps v3: marcador personalizado com foto do perfil do usuário

Eu estou lutando desde 2 dias com algo que eu estava pensando fácil, em um mapa, eu tenho que exibir um marcador para cada usuário com a imagem de perfil do usuário FB dentro.

insira a descrição da imagem aqui

Eu estou querendo saber como eu posso ter um resultado semelhante a este? O que eu tentei foi realmente hackish.

  • Eu coloquei a foto FB como o ícone do marcador
  • Eu coloquei uma class CSS no label do marcador
  • Eu acho o irmão para adicionar essa borda e esta seta para decorar a imagem do usuário

mas não funciona quando há mais de um marcador no mapa.

.marker-labels { display: none !important; + div { background-color: $dark-gray; border: 2px solid $dark-gray; @include radius(0.2em); height: 54px !important; width: 54px !important; overflow: inherit !important; > img { height: 50px; width: 50px; } &:after { content: ' '; height: 0; width: 0; border: 6px solid transparent; border-top-color: $dark-gray; position: absolute; top: 52px; left: 19px; } } } 

pergunta global:

  • como posso obter um ícone como esse ( http://mt-st.rfclipart.com/image/thumbnail/24-1d-5f/blue-glossy-square-map-pin-or-speech-bubble-Download-Royalty -free-Vector-File-EPS-29153.jpg por exemplo) com uma imagem de usuário personalizada dentro? é possível?

  • caso contrário, como é possível personalizar o ícone (se for a foto do perfil) para ter um resultado semelhante ao da captura de canvas

Obrigado pela ajuda

Esta resposta assume que você já tem os URIs para as imagens do perfil do Facebook. Honestamente, parece que existe uma maneira mais fácil, mas eu encontrei um código que mostra como criar um marcador personalizado com elementos HTML personalizados e fui a partir daí. A partir daí, é muito fácil criar um marcador personalizado que aceite um URI de imagem como um parâmetro. Do original, acabei de adicionar um parâmetro imageSrc , movi o estilo para fora do código, anexando um nome de class ao novo div. Em termos de html e css, eu adicionei uma imagem com o URI de imagem passada no div e adicionei um pouco de CSS para parecer com o que você tem.

Demonstração

Então o código javascript se parece com algo assim:

 function CustomMarker(latlng, map, imageSrc) { this.latlng_ = latlng; this.imageSrc = imageSrc; //added imageSrc this.setMap(map); } CustomMarker.prototype = new google.maps.OverlayView(); CustomMarker.prototype.draw = function () { // Check if the div has been created. var div = this.div_; if (!div) { // Create a overlay text DIV div = this.div_ = document.createElement('div'); // Create the DIV representing our CustomMarker div.className = "customMarker" //replaced styles with className var img = document.createElement("img"); img.src = this.imageSrc; //attach passed image uri div.appendChild(img); google.maps.event.addDomListener(div, "click", function (event) { google.maps.event.trigger(me, "click"); }); // Then add the overlay to the DOM var panes = this.getPanes(); panes.overlayImage.appendChild(div); } // Position the overlay var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); if (point) { div.style.left = point.x + 'px'; div.style.top = point.y + 'px'; } }; CustomMarker.prototype.remove = function () { // Check if the overlay was on the map and needs to be removed. if (this.div_) { this.div_.parentNode.removeChild(this.div_); this.div_ = null; } }; CustomMarker.prototype.getPosition = function () { return this.latlng_; }; 

Acho que adicionei apenas uma ou duas linhas aqui. Você pode simplesmente adicionar isso à sua página, eu acho. Com isso, você pode simplesmente estilizar o contêiner normalmente e deve se aplicar a todos os marcadores personalizados. Você pode adicionar elementos e classs conforme achar melhor para obter a aparência que está procurando. Mas para fins de conclusão eu adicionei os estilos que usei para a demonstração aqui.

 .customMarker { /* the marker div */ position:absolute; cursor:pointer; background:#424242; width:100px; height:100px; /* we'll offset the div so that the point passed doesn't end up at the upper left corner but at the bottom middle. so we'll move it left by width/2 and up by height+arrow-height */ margin-left:-50px; margin-top:-110px; border-radius:10px; padding:0px; } .customMarker:after { //triangle content:""; position: absolute; bottom: -10px; left: 40px; border-width: 10px 10px 0; border-style: solid; border-color: #424242 transparent; display: block; width: 0; } .customMarker img { //profile image width:90px; height:90px; margin:5px; border-radius:2px; } 

E para a demonstração, tenho alguns dados de exemplo em array e os coloquei no mapa usando um loop for.

 var data = [{ profileImage: "http://sofpt.miximages.com/javascript/image1.jpg", pos: [37.77, -122.41], }, { profileImage: "http://sofpt.miximages.com/javascript/image2.jpg", pos: [37.77, -122.41], }] for(var i=0;i 

Espero que isso ajude.