Question

How to put marker on Google map with transparent text label ?

Example:
Google Map with weather overlays has temperature with transparent background.
The label for the marker dynamically changes. Ex As temp changes the label changes too.

Answer 1

Try the MarkerWithLabel utility library. Here’s a demo

The minimum requirement is a CSS style.

.labels {
  color: red;
  background-color: transparent;
  font-family: "Lucida Grande", "Arial", sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  width: 100px;
  border: 0;
}

​

  var marker1 = new MarkerWithLabel({
    position: new google.maps.LatLng(0,-5),
    draggable: true,
    raiseOnDrag: true,
    map: map,
    labelContent: "Tina's transparent Marker With Label",
    labelAnchor: new google.maps.Point(50, 0),
    labelClass: "labels", // the CSS class for the label
    labelStyle: {opacity: 0.75}
  });