google-mapsgoogle-maps-api-3kmlkmz

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:

Map of New York with blue point markers.

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?

Solution

  • 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.

    screenshot of resulting map with your posted KML (modified so the labels have a style)

    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