How to change font properties in javascript

Question

How to change font properties in javascript

Navigation

#1 by (4 votes)

4

I need to change the font format and play over the icon as picture. Text is being 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]
    });

javascript google-maps font

asked by anonymous 01.09.2017 / 03:26

1 answer

What is the usefulness of Task.Yield? How to search for a character in a set of javascript strings

score 4 · Accepted Answer

label properties in the Marker are pretty 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 you have another option, which is to use MarkerWithLabel for V3 . Download the markerwithlabel.js for your design. By doing this, just set your label via CSS and some properties on your Marker .

First step is to replace your new google.maps.Marker with new MarkerWithLabel , like this:

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

See below an example of a class in CSS:

CSS:

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

JS:

Within your Marker, enter the

labelContent : content of label
labelAnchor : positioning of label relative to the center of marker
labelClass : class definition of label

See an example below:

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

Result:

Bonus:

SeehowIwoulddoitifitwasaprojectofmine:

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><scriptsrc="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>