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

Question

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?

Answer 1

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:

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);

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

<!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>

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