How to change font properties in javascript

Question

I need to change the font format and play up the image icon. Text displayed by: 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]
    });

Answer 1

As properties of a label in Marker are very limited. See below:

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

Example of how to use:

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

But there is another option, which is to use the Markerwithlabel for V3. Download the markerwithlabel.js for your project. By doing this, just set up your label via CSS and some properties in your Marker.

First step is to replace your new google.maps.Marker for new MarkerWithLabel, in this way:

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

See below for an example of a class in CSS:

CSS:

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

JS:

Inside your Marker, insert the

• labelContent: content of label
• labelAnchor: positioning of label in relation to the centre of the Marker
• labelClass: definition of the class of label

See below for an example:

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

Upshot:

Bonus:

See how I would do if it was a project of mine:

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>