how to make labels from kml files appear in google maps over placemarks

Question

I have a simple kml file that has the labelStyle , MultiGeometry tag with both LineString and Point within:

here is how the kml file looks :

<?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" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
    <name>lines.kmz</name>
    <Style id="LineStyle00">
        <LabelStyle>
            <color>ff0000ff</color>
            <scale>2.0</scale>
        </LabelStyle>
        <LineStyle>
            <color>ff00ff55</color>
            <width>3</width>
        </LineStyle>
        <PolyStyle>
            <color>00000000</color>
            <outline>0</outline>
        </PolyStyle>
    </Style>
    <Folder id="FeatureLayer0">
        <name>مسارات المصارف الجديدة</name>
        <Snippet maxLines="0"/>
        <Placemark id="ID_00000">
            <name>العياط</name>
            <Snippet maxLines="0"/>
            <description>&lt;html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt"&gt;

&lt;head&gt;

&lt;META http-equiv="Content-Type" content="text/html"&gt;

&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;

&lt;/head&gt;

&lt;body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;"&gt;

&lt;table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px"&gt;

&lt;tr style="text-align:center;font-weight:bold;background:#9CBCE2"&gt;

&lt;td&gt;العياط&lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td&gt;

&lt;table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px"&gt;

&lt;tr&gt;

&lt;td&gt;SHAPE&lt;/td&gt;

&lt;td&gt;Polyline&lt;/td&gt;

&lt;/tr&gt;

&lt;tr bgcolor="#D4E4F3"&gt;

&lt;td&gt;الاسم&lt;/td&gt;

&lt;td&gt;العياط&lt;/td&gt;

&lt;/tr&gt;

&lt;tr&gt;

&lt;td&gt;SHAPE_Length&lt;/td&gt;

&lt;td&gt;3299.179106&lt;/td&gt;

&lt;/tr&gt;

&lt;/table&gt;

&lt;/td&gt;

&lt;/tr&gt;

&lt;/table&gt;

&lt;/body&gt;

&lt;/html&gt;</description>
            <styleUrl>#LineStyle00</styleUrl>
            <MultiGeometry>
                <LineString>
                    <coordinates>
                        31.22167327537224,29.60699409142521,0 31.21864638138206,29.60718181167419,0 31.21700996113995,29.60744215099063,0 31.21414622689401,29.60878103953701,0 31.21295610437081,29.60959924916077,0 31.20477400640138,29.60788844697299,0 31.20298882177771,29.61257455770906,0 31.19333333292129,29.60888888869802,0 
                    </coordinates>
                </LineString>
            <Point><coordinates>31.21295610437081,29.60959924916077,0</coordinates></Point></MultiGeometry>
        </Placemark>

    </Folder>
</Document>
</kml>

when I open this file on google earth it works like a charm with both elements and the label "over the point element " shown perfectly, but when I open it on my Google Maps using js script as follows:

           var kml_layer = new google.maps.KmlLayer(src, {
                suppressInfoWindows: true,
                preserveViewport: true,
                map: map
            });

it only shows LineString and point but without the 'label` shown on it .. any idea what could be causing this?

see Screenshots below :

google earth

Labels are shown as expected over the point element

Google maps with Javascript

Labels are missing from the points

Answer 1

From the related question: KML labels not appearing in Google Map API

<LabelStyle> is not supported by the Google Maps JavaScript API v3

See the documentation:

KML element	Supported in the API?
<LabelStyle>	no

possible duplicate of Utilizing geoxml3 to display KML labels

Example using your KML:

code snippet (using inline KML, as to use with geoxml3, the KML must be on the same domain):

var map, infowindow;

function initialize() {
  infowindow = new google.maps.InfoWindow({});

  var googlemaps_options = {
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    streetViewControl: false
  }

  map = new google.maps.Map(document.getElementById('map_canvas'), googlemaps_options);

  var geo = new geoXML3.parser({
    map: map,
    zoom: true,
    singleInfoWindow: true,
    infoWindow: infowindow,
    createMarker: createMarker
  });
  geo.parseKmlString(kmlStr);
}

function createMarker(placemark, doc) {
  // create a Marker to the map from a placemark KML object

  // Load basic marker properties
  var markerOptions = {
    map: map,
    position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
    title: placemark.name,
    zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000) << 5,
    icon: placemark.style.icon,
    shadow: placemark.style.shadow
  };

  // Create the marker on the map
  var marker = new google.maps.Marker(markerOptions);
  // add label
  var boxText = document.createElement("div");
  boxText.style.cssText = "border: none, margin:min-top: 8px; background: none; padding: 5px;";
  boxText.innerHTML = placemark.name;

  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-40, -60),
    zIndex: null,
    boxStyle: {
      textAlign: "center",
      fontSize: "8pt",
      width: "80px"
    },
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };

  var ib = new InfoBox(myOptions);
  ib.open(map, marker);

  // Set up and create the infowindow
  var infoWindowOptions = {
    content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
      '</h3><div>' + placemark.description + '</div>' +
      '<input type="button" onclick="displayInfo(\'' + placemark.name + '\',\'' + placemark.description + '\');" value="populate div"></input>',
    pixelOffset: new google.maps.Size(0, 2)
  };
  infowindow.setOptions(infoWindowOptions);
  marker.infoWindowOptions = infoWindowOptions;
  marker.infoWindow = infowindow;
  // Infowindow-opening event handler
  google.maps.event.addListener(marker, 'click', function() {
    this.infoWindow.close();
    marker.infoWindow.setOptions(this.infoWindowOptions);
    this.infoWindow.open(this.map, this);
  });
  placemark.marker = marker;
  return marker;
}

function displayInfo(name, description) {
  document.getElementById('info').innerHTML = name + "<br>" + description;
}
google.maps.event.addDomListener(window, 'load', initialize);
var kmlStr = '<?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" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"><Document><name>lines.kmz</name><Style id="LineStyle00"><LabelStyle><color>ff0000ff</color><scale>2.0</scale></LabelStyle><LineStyle><color>ff00ff55</color><width>3</width></LineStyle><PolyStyle><color>00000000</color><outline>0</outline></PolyStyle></Style><Folder id="FeatureLayer0"><name>مسارات المصارف الجديدة</name><Snippet maxLines="0"/><Placemark id="ID_00000"><name>العياط</name><Snippet maxLines="0"/><description>&lt;html xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:msxsl="urn:schemas-microsoft-com:xslt"&gt;&lt;head&gt;&lt;META http-equiv="Content-Type" content="text/html"&gt;&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;&lt;/head&gt;&lt;body style="margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;"&gt;&lt;table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-collapse:collapse;padding:3px 3px 3px 3px"&gt;&lt;tr style="text-align:center;font-weight:bold;background:#9CBCE2"&gt;&lt;td&gt;العياط&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;table style="font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100%;border-spacing:0px; padding:3px 3px 3px 3px"&gt;&lt;tr&gt;&lt;td&gt;SHAPE&lt;/td&gt;&lt;td&gt;Polyline&lt;/td&gt;&lt;/tr&gt;&lt;tr bgcolor="#D4E4F3"&gt;&lt;td&gt;الاسم&lt;/td&gt;&lt;td&gt;العياط&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;SHAPE_Length&lt;/td&gt;&lt;td&gt;3299.179106&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;</description><styleUrl>#LineStyle00</styleUrl><MultiGeometry><LineString><coordinates> 31.22167327537224,29.60699409142521,0 31.21864638138206,29.60718181167419,0 31.21700996113995,29.60744215099063,0 31.21414622689401,29.60878103953701,0 31.21295610437081,29.60959924916077,0 31.20477400640138,29.60788844697299,0 31.20298882177771,29.61257455770906,0 31.19333333292129,29.60888888869802,0 </coordinates></LineString><Point><coordinates>31.21295610437081,29.60959924916077,0</coordinates></Point></MultiGeometry></Placemark></Folder></Document></kml>';

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

#map_canvas {
  height: 90%;
  width: 100%;
}

<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 src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/archive/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>