Customize Google Map API V3 Marker label

Question

function initMap() {
  var uluru = {lat: 13.676442, lng: 100.638276};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    label: {
      text: "$300k",
      color: "#4682B4",
      fontSize: "30px",
      fontWeight: "bold"
    },
    title: "Hello World!",
    visible: true
  });
}

I want to customize the label. I try to find the answers in google documentation they have only few properties to change (https://developers.google.com/maps/documentation/javascript/3.exp/reference#MarkerOptions) then I search on google the most answer is MarkerWithLabel but the problem is the link doesn't work any more http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js" so I cannot use the library. I attach pictures from my code and what I want. Can any one help me please?

Answer 1

You can add your own class with label.className key:

map: map,
draggable: true,

label: {
        
    text: value.title,
    className: 'marker-label',
      
}

But you must know that Google adds another styles for every marker programmaticaly:

color: rgb(0, 0, 0);
font-size: 14px;
font-family: Roboto, Arial, sans-serif;

So you must override its values by yourself programmaticaly not in css according @vikashvishwakarma answer because styles have more priority as classes.

Answer 2

SO You can customised object by defining in html string then assign to object

       let arrayElem = '<h4> Details</h4><br>Employee 
       ID:'+element.EmpID+'<br>Coordinates:'+element.lat+', 
       '+element.lng+'<br>Sequence ID:'+element.seqId+'<br> 
        <a>RouteID</a>:'+RouteId;


        let marker = {icon:'./assets/desticontest.png',
                      label:{text:element.seqId.toString(),
                             fontSize: "20px",
                              fontWeight: "bold",
                              color:'black'},
                      opacity:0.8,
                      infoWindow:arrayElem
                      };