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