apply background colour for label in google maps marker

Question

Hi ,

 

Below is my code. I have a google map with a marker. I want to apply background colour for the label with text "My Label Text".

 

The CSS for label is not working inside marker except label text and color. Please help.

<style>
html,
body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3rthxrJtfGHmGJijI_fMrT96ecSc-AL8&v=3.exp" type="text/javascript"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 12.97,
lng: 77.59
}
});
var markerConfig = {
lat: 12.97,
lng: 77.59
},
iconSize = 0.45,
icon = {
path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",
fillColor: '#00492C',
fillOpacity: 1,
strokeWeight: 0,
scale: iconSize,
anchor: new google.maps.Point(32, 80),
labelOrigin: new google.maps.Point(30, 30)
};
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),
label: {
text: "My Label Text",
color: 'white',
fontweight: "bold",
fontsize: "20px"
},
icon: icon,
});
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>