OpenLayer KML loads icon but doesn't show labels

Question

I loading a KML using OpenLayer. Loads the icons, but doesn't show the labels. If I remove the "Style" section the label is shown, but not the icon. Any idea is highly appreciated. Thanks

My code:

    var myStyles2 = new OpenLayers.StyleMap({
        "default": new OpenLayers.Style({
            strokeColor: "#FFCC33",
            strokeWidth: 6,
            strokeOpacity: 1,
            fillColor: "#003399",
            fillOpacity: 0,
            label: "${name}",
            fontSize: "40px"
        })
    });

    var OMapShips = new OpenLayers.Layer.Vector("KML", { styleMap: myStyles2,
        projection: new OpenLayers.Projection("EPSG:4326"),
        strategies: [new OpenLayers.Strategy.Fixed({ preload: false })],
        protocol: new OpenLayers.Protocol.HTTP({
            url: 'js/hl/XMLFile.xml',
            format: new OpenLayers.Format.KML({
                extractStyles: true,
                extractAttributes: true,
                maxDepth: 2
            })
        }),
        renderers: ["SVG"]
    });

    OMap.addLayers([OMapShips]);

Extract of the KML

<?xml version="1.0" encoding="utf-16" standalone="yes"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document id="shipsKML">
    <name>shipsKML</name>
    <Placemark id="366943240">
      <name>Aet Shelby</name>
      <description><![CDATA[<table width = "250px" style="font-size:10px;"<tr><td align="left">Vessel Name</td><td align="right">AET SHELBY</td></tr></table>]]></description>
      <Point>
        <coordinates>-94.78686,29.3203483333333,0</coordinates>
      </Point>
      <Style>
        <IconStyle>
          <color>ffffffff</color>
          <heading>511</heading>
          <Icon>
            <href><![CDATA[http://XX.XX.XX.XX/Icons/Moored/MPR_Moored.png]]></href>
          </Icon>
        </IconStyle>
        <BalloonStyle>
          <bgColor>ff000000</bgColor>
          <textColor>ffffffff</textColor>
          <text><![CDATA[$[description]]]></text>
        </BalloonStyle>
      </Style>
    </Placemark>
  </Document>
</kml>

Answer 1

I figured out. I just taken out the whole "Style" section from my KML, and let OpenLayers handle the icon and label draw. Even I achieved the rotation! I hope this can help to anyone. If is useful, don't forget to mark as answer, and upvote the question.

JavaScript Code:

    var myStyles2 = new OpenLayers.StyleMap({ 'default': {
        strokeColor: "#00FF00",
        strokeOpacity: 1,
        strokeWidth: 1,
        fillColor: "#005500",
        fillOpacity: 0.5,
        pointRadius: 10,
        pointerEvents: "visiblePainted",
        // label with \n linebreaks
        label: "${name}",

        fontColor: "#000000",
        fontSize: "12px",
        fontFamily: "Courier New, monospace",
        fontWeight: "bold",
        labelAlign: "${align}",
        labelXOffset: "${xOffset}",
        labelYOffset: +18,
        labelOutlineColor: "white",
        labelOutlineWidth: 3,
        externalGraphic: "${myurl}",
        rotation: "${myheading}"
        }
    });

KML (extract):

<Placemark id="367007000">
  <name>Jean Gilbert</name>
  <description><![CDATA[<table width = "250px" style="font-size:10px;"<tr><td align="left">Vessel Name</td><td align="right">JEAN GILBERT</td></table>]]></description>
  <myurl><![CDATA[http://XX.XX.XX.XX/Icons/Moored/WIG_Moored.png]]> </myurl>
  <myheading>45</myheading>
  <Point>
    <coordinates>-93.7430266666667,29.1617766666667,0</coordinates>
  </Point>
</Placemark>