4

Criei um mapa dinâmico que exibe vários marcadores conforme a consulta especificada pelo usuário. Quando clino no marcador, aparece o balão de informação normalmente com os dados que eu solicitei que aparecesse. Até aí tudo bem! Mas, estou precisando fazer exibir uma legenda no marcador sem eu precisar clicar sobre o mesmo. Ou seja, quando aparecer o marcador no mapa, deve também aparecer um número ou texto de identificação ao lado, em cima, em baixo, sei lá, em algum local próximo ao marcador.

Sei que no Google Earth é possível fazer, mas é local, no Google Maps não consegui fazer.

Alguém já fez? Alguém pode me ajudar?

2 Respostas 2

4
+50

Fiz um exemplo que acredito ser o que quer.

Para mudar o label altere o css, lá você poderá mudar o tamanho, a borda, a opacidade, etc.

Para mudar a localização do label altere essa parte do javascript:

labelAnchor: new google.maps.Point(40, 0)

Como meu label tem 80 de largura usei 40, 0 para centralizar no pé do marcador.

Qualquer dúvida é só falar que tento completar a resposta.

Exemplo retirado de noaa.gov - Teste 1 link quebrado

Veja outro exemplo muito interessante em noaa.gov - Teste 2 link quebrado

0

Resposta extraída de "Adicionar legenda em um Mapa pela API do googlemaps." link para resposta

Conforme o snippet abaixo você terá dois pontos, sendo cada um de cada cor e suas respectivas legendas encontram-se no topo à direita.

google.maps.event.addDomListener(window, "load", function () {

  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(
    document.getElementById('legend'));
  
  var marker0 = new google.maps.Marker({
    position: new google.maps.LatLng(33.808678, -117.918921),
    map: map,
    icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png"
  });

  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(33.818038, -117.928492),
    map: map
  });
});
#legend {
  background: white;
  padding: 10px;
  top: 5px !important;
  right: 5px !important;
}
.display-flex {
  display: flex;
}
.legend-box {
  width: 10px;
  height: 10px;
  border: 1px solid;
  margin-top: 2px;
  margin-right: 5px;
}
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>
<div id="legend">
  Legenda:
  <div class="display-flex"><div class="legend-box" style="background: #65BA4A;"></div> Ponto Inicial</div>
  <div class="display-flex"><div class="legend-box" style="background: #F76053;"></div> Ponto Final</div>
</div>



<!-- begin snippet: js hide: false console: false babel: false -->

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .