JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas"></div>

CSS

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var locations = [
  { position: {lat: 37.4419, lng: -122.1419}}, 
  { position: {lat: 37.4529598, lng: -122.1817252}},
  { position: {lat: 37.4688273, lng: -122.141075}},
  ];
var markerPins = [];

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  for (var i = 0; i < locations.length; i++) {
    markerPins[i] = new google.maps.Marker({

      position: locations[i].position,
      map: map,
      optimized: false,
      // icon: myPin,
      label: {
        color: 'transparent', // <= HERE
        fontSize: '11px',
        fontWeight: '900',
        text: 'Example Label'
      }
    });
  }
  setTimeout(function() {
    changeMarkerLabelColor("blue");
  }, 5000)
}
google.maps.event.addDomListener(window, "load", initialize);
function changeMarkerLabelColor(labelColor) {

    for (let i = 0; i < markerPins.length; i++ ) {
        var label = markerPins[i].getLabel();
        label.color = labelColor;
        markerPins[i].setLabel(label);

    }
}