How do I remove the icon and show the label of a KML placemark in Google Maps JavaScript API?

I'm using Google Maps JavaScript API and loading a KML layer to display points.

I want it to display the labels but not the blue point markers.

Here is what it looks like now:

The blue markers are where I want the labels to be.

Here is the relevant section from the KML:

<Style id="normalPlacemark">
	<IconStyle>
		<Icon><href>https://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png</href></Icon>
	</IconStyle>
	<LineStyle>
		<gx:labelVisibility>1</gx:labelVisibility>
	</LineStyle>
</Style>
<Folder>
  <name>Labels</name>
  <Placemark>
    <name>3H</name>
    <Point><coordinates>-74.784880,41.752639,0</coordinates></Point>
  </Placemark>
  <Placemark>
    <name>4F</name>
    <Point><coordinates>-74.985419,42.619435,0</coordinates></Point>
  </Placemark>
  <Placemark>
    <name>4G</name>
    <Point><coordinates>-74.444085,42.514970,0</coordinates></Point>
  </Placemark>
  <Placemark>
    <name>4H</name>
    <Point><coordinates>-74.126351,42.508052,0</coordinates></Point>
  </Placemark>
  <Placemark>
    <name>4O</name>
    <Point><coordinates>-75.214074,42.230072,0</coordinates></Point>
  </Placemark>
  <Placemark>
    <name>4P</name>
    <Point><coordinates>-74.795944,42.201073,0</coordinates></Point>
  </Placemark>
  <Placemark>
    <name>4R</name>
    <Point><coordinates>-74.418647,42.266143,0</coordinates></Point>
  </Placemark>
  <Placemark>
    <name>4W</name>
    <Point><coordinates>-75.115810,41.965973,0</coordinates></Point>
  </Placemark>
  <Placemark>
    <name>6G</name>
    <Point><coordinates>-76.005867,43.998634,0</coordinates></Point>
  </Placemark>
</Folder>

I've tried messing with this in every way I can think of but I think I just don't understand KML well enough. How do I get these blue markers to stop appearing and the labels to start appearing?

One option to display the Placemark names as labels using geoxml3 (based of the related question: Change font size of placemark's name when zooming) would be to create a custom createMarker function for geoxml3 that uses your transparent icon and sets the Marker's label to the name text of the placemark:

function createMarker(placemark, doc) {
  var markerOptions = {
    optimized: true,
    clickable: false,
    position: placemark.latlng,
    map: map,
    label: {
      text: placemark.name,
      fontSize: "18px"
    },
    icon: "https://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png",
    visible: true,
  };
  var marker = new google.maps.Marker(markerOptions);
  doc.markers.push(marker);
  return marker;
}

You could continue to use KmlLayer to display the polygons, or use geoxml3 to display those as well.

code snippet:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

var geoXml;
var map;

function createMarker(placemark, doc) {
  var markerOptions = {
    optimized: true,
    clickable: false,
    position: placemark.latlng,
    map: map,
    label: {
      text: placemark.name,
      fontSize: "18px"
    },
    icon: "https://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png",
    visible: true,
  };

  var marker = new google.maps.Marker(markerOptions);
  doc.markers.push(marker);

  return marker;
}

function initialize() {
  var myOptions = {
    center: new google.maps.LatLng(105.4009049697155, 45.9307395294156),
    zoom: 15,
  };
  map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions
  );
  geoXml = new geoXML3.parser({
    map: map,
    singleInfoWindow: false,
    processStyles: false,
    createMarker: createMarker,
    afterParse: useTheData,
  });
  geoXml.parseKmlString(kmlString);

  google.maps.event.addListener(map, "zoom_changed", function() {
    console.log("zoom=" + map.getZoom());
    if (map.getZoom() < 7) {
      geoXml.docs[0].markers.forEach(function(placemark) {
        if (placemark.getMap() != null) {
          var label = placemark.getLabel();
          console.log(label);
          if (typeof label === 'string') {
            var labelObj = {};
            labelObj.text = label;
            labelObj.fontSize = "0px";
            placemark.setLabel(labelObj);
          } else {
            label.fontSize = "0px";
            placemark.setLabel(label);
          }

        }
      });
    } else {
      geoXml.docs[0].markers.forEach(function(placemark) {
        if (placemark.getMap() != null) {
          var label = placemark.getLabel();
          // console.log(label);
          if (typeof label === 'string') {
            var labelObj = {};
            labelObj.text = label;
            label.fontSize = "18px";
            placemark.setLabel(labelObj);
          } else {
            label.fontSize = "18px";
            placemark.setLabel(label);
          }
        }
      });
    }
  });

}

function useTheData(doc) {
  for (var i = 0; i < doc[0].placemarks.length; i++) {
    var placemark = doc[0].placemarks[i];
    if (placemark.polygon) {
      placemark.polygon.normalStyle = {
        strokeColor: "#ffff00",
        strokeWeight: 1,
        strokeOpacity: 0,
        fillColor: "#ffff00",
        fillOpacity: 0,
      };
      placemark.polygon.setOptions(placemark.polygon.normalStyle);
    }
  }
}
var kmlString = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2"><Document><Style id="normalPlacemark"><IconStyle><Icon><href>https://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png</href></Icon></IconStyle><LineStyle><gx:labelVisibility>1</gx:labelVisibility></LineStyle><LabelStyle><color>ff0000cc</color><colorMode>random</colorMode><scale>1.5</scale></LabelStyle></Style><Folder><name>Labels</name><Placemark><name>3H</name><styleUrl>#normalPlacemark</styleUrl><Point><coordinates>-74.784880,41.752639,0</coordinates></Point></Placemark><Placemark><name>4F</name><styleUrl>#normalPlacemark</styleUrl><Point><coordinates>-74.985419,42.619435,0</coordinates></Point></Placemark><Placemark><name>4G</name><styleUrl>#normalPlacemark</styleUrl><Point><coordinates>-74.444085,42.514970,0</coordinates></Point></Placemark><Placemark><name>4H</name><styleUrl>#normalPlacemark</styleUrl><Point><coordinates>-74.126351,42.508052,0</coordinates></Point></Placemark><Placemark><name>4O</name><styleUrl>#normalPlacemark</styleUrl><Point><coordinates>-75.214074,42.230072,0</coordinates></Point></Placemark><Placemark><name>4P</name><styleUrl>#normalPlacemark</styleUrl><Point><coordinates>-74.795944,42.201073,0</coordinates></Point></Placemark><Placemark><name>4R</name><styleUrl>#normalPlacemark</styleUrl><Point><coordinates>-74.418647,42.266143,0</coordinates></Point></Placemark><Placemark><name>4W</name><styleUrl>#normalPlacemark</styleUrl><Point><coordinates>-75.115810,41.965973,0</coordinates></Point></Placemark><Placemark><name>6G</name><styleUrl>#normalPlacemark</styleUrl><Point><coordinates>-76.005867,43.998634,0</coordinates></Point></Placemark></Folder></Document></kml>';

google.maps.event.addDomListener(window, 'load', initialize);

<!-- language: lang-css -->

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

<!-- language: lang-html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Import KML</title>
</head>

<body>
  <div id="map_canvas"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
  <script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/geocodezip/geoxml3/master/ProjectedOverlay.js"></script>
</body>

</html>

<!-- end snippet -->

modified KML:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">
	<Document>
		<Style id="normalPlacemark">
			<IconStyle>
				<Icon>
					<href>https://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png</href>
				</Icon>
			</IconStyle>
			<LineStyle>
				<gx:labelVisibility>1</gx:labelVisibility>
			</LineStyle>
			<LabelStyle>
				<color>ff0000cc</color>
				<colorMode>random</colorMode>
				<scale>1.5</scale>
			</LabelStyle>
		</Style>
		<Folder>
			<name>Labels</name>
			<Placemark>
				<name>3H</name>
				<styleUrl>#normalPlacemark</styleUrl> <!-- missing -->
				<Point>
					<coordinates>-74.784880,41.752639,0</coordinates>
				</Point>
			</Placemark>
			<Placemark>
				<name>4F</name>
				<styleUrl>#normalPlacemark</styleUrl>
				<Point>
					<coordinates>-74.985419,42.619435,0</coordinates>
				</Point>
			</Placemark>
			<Placemark>
				<name>4G</name>
				<styleUrl>#normalPlacemark</styleUrl>
				<Point>
					<coordinates>-74.444085,42.514970,0</coordinates>
				</Point>
			</Placemark>
			<Placemark>
				<name>4H</name>
				<styleUrl>#normalPlacemark</styleUrl>
				<Point>
					<coordinates>-74.126351,42.508052,0</coordinates>
				</Point>
			</Placemark>
			<Placemark>
				<name>4O</name>
				<styleUrl>#normalPlacemark</styleUrl>
				<Point>
					<coordinates>-75.214074,42.230072,0</coordinates>
				</Point>
			</Placemark>
			<Placemark>
				<name>4P</name>
				<styleUrl>#normalPlacemark</styleUrl>
				<Point>
					<coordinates>-74.795944,42.201073,0</coordinates>
				</Point>
			</Placemark>
			<Placemark>
				<name>4R</name>
				<styleUrl>#normalPlacemark</styleUrl>
				<Point>
					<coordinates>-74.418647,42.266143,0</coordinates>
				</Point>
			</Placemark>
			<Placemark>
				<name>4W</name>
				<styleUrl>#normalPlacemark</styleUrl>
				<Point>
					<coordinates>-75.115810,41.965973,0</coordinates>
				</Point>
			</Placemark>
			<Placemark>
	
			<name>6G</name>
				<styleUrl>#normalPlacemark</styleUrl>
				<Point>
					<coordinates>-76.005867,43.998634,0</coordinates>
				</Point>
			</Placemark>
		</Folder>
	</Document>
</kml>

live version