4

Preciso alterar o formato da fonte e jogar para cima do ícone conforme imagem. O texto está sendo exibido por: label: beach[7]

  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[5], beach[6]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        //animation:google.maps.Animation.BOUNCE,  <!-- animação -->
        map: map,
        icon: image,
        shape: shape,
        //title: 'Hello World!',
        label: beach[7],
        //linha abaixo deve ser acrescentada para mostrar a caixa no click
        html: beach[0]+beach[1]+beach[2]+beach[3]+beach[4]
    });

preciso que fique acima do veículo

1 Resposta 1

4

As propriedades de uma label no Marker são bem limitadas. Veja abaixo:

 - color       string:   Cor do texto
 - fontFamily  string:   Definição equivalente ao font-family do CSS
 - fontSize    string:   Tamanho da fonte equivalente ao font-size do CSS. 
 - fontWeight  string:   Largura da letra equivalente ao font-weight do CSS
 - text        string:   Texto no qual quer que mostre.

Exemplo de como usar:

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    label: {text: "Placa tal", fontWeight: "bold", fontSize: "20px" }
}); 

Porém tem uma outra opção, que é usar o MarkerWithLabel for V3. Faça o download do markerwithlabel.js para seu projeto. Fazendo isso, basta definir configurar sua label via CSS e algumas propriedades no seu Marker.

Primeiro passo é substituir seu new google.maps.Marker para new MarkerWithLabel, desta forma:

var marker = new MarkerWithLabel({
    //inserir propriedades
});

Veja abaixo como seria um exemplo de classe no CSS:

CSS:

.labelcustom{
    color: #000;
    font-weight: bold;
    font-size: 20px;
}

JS:

Dentro do seu Marker, insira o

  • labelContent: conteúdo da label
  • labelAnchor: posicionamento da label em relação ao centro do marker
  • labelClass: definição da classe da label

Veja abaixo um exemplo:

labelContent: "Placa: MLW-5973",
labelAnchor: new google.maps.Point(80, 80),
labelClass: "labelcustom"

Resultado:

inserir a descrição da imagem aqui

Bonus:

Veja como eu faria se fosse um projeto meu:

function initMap() {
  var latLng = new google.maps.LatLng(49.47805, -123.84716);
  var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var image = {
          url: 'https://image.flaticon.com/icons/svg/67/67994.svg',
          size: new google.maps.Size(40, 40),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(0, 32)
        };
  var marker = new MarkerWithLabel({
    icon: image,
    position: homeLatLng,
    map: map,
    labelContent: "MLW-5973",
    labelAnchor: new google.maps.Point(30, 60),
    labelClass: "labels"
  });

  var iw = new google.maps.InfoWindow({
    content: "Home For Sale"
  });
}

google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

.labels {
  color: #010101;
  background-color: #E3E3E3;
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  width: 85px;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #010101;
  padding: 2px; 
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>

15
  • consegui resolver de outra forma mais manual, mas deu certo. Para finalizar precisaria deixar em negrito a fonte. Continuo com o mesmo código anterior. Commented 1/09/2017 às 4:12
  • @LucasSpielmann Eu uso geralmente este plugin porque é mais fácil de manusear, porque usa CSS. Como neste exemplo que dei, já está em negrito e com uma fonte maior.
    – viana
    Commented 1/09/2017 às 4:14
  • var marker = new MarkerWithLabel({ position: myLatLng, map: map, icon: image, shape: shape, label: beach[7], html: beach[0]+beach[1]+beach[2]+beach[3]+beach[4] }); Commented 1/09/2017 às 4:19
  • sumiram os icones Commented 1/09/2017 às 4:19
  • 1
    Tenta assim: label: { text: "Placa tal", fontWeight: "bold" },
    – viana
    Commented 1/09/2017 às 4:43

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 .