Load WFS and use stylemap with external graphic

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<body onload="init()">Click on right button to change Style!
  <div id="map" class="smallmap"></div>
  <div id="panel"></div>
  <p>Active Vector Style: <b><span id="name"></span></b>
  </p>
</body>

CSS

#map {
  width: 400px;
  height: 400px;
  border: 1px solid #dddddd;
}

.Panel2 {
  width: 18px;
  height: 54px;
  cursor: pointer;
  right: 10px;
  top: 74px;
}

.firstItemInactive,
.secondItemInactive {
  background: #30d5c8;
  border: 2px solid #075f67;
  width: 18px;
  height: 18px;
}

.firstItemActive,
.secondItemActive {
  background: #ffffdd;
  border: 2px solid #dddddd;
  width: 18px;
  height: 18px;
}

JavaScript

var map;
var layer, wms, sty, sty2, sm, sm2, stil;

function init() {
  map = new OpenLayers.Map('map');
  wms = new OpenLayers.Layer.WMS(
    "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
      layers: 'basic'
    });
  var myStyle = {
    fill: true,
    fillColor: "#ff0000"
  };

  var defStyle = {
    externalGraphic: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
    // can also be set relativ like /images/infi-i-maps.png
    graphicWidth: 32,
    graphicHeight: 37,
    graphicYOffset: -37,
    graphicOpacity: 1,
    cursor: "pointer"
  };
  sty = OpenLayers.Util.applyDefaults(defStyle, OpenLayers.Feature.Vector.style["default"]);
  sm = new OpenLayers.StyleMap({
    'default': sty
  });


  // style2
  var defStyle2 = {
    externalGraphic: "https://maps.google.com/mapfiles/kml/shapes/schools_maps.png",
    graphicWidth: 32,
    graphicHeight: 37,
    graphicYOffset: -37,
    graphicOpacity: 1,
    cursor: "pointer"
  };
  sty2 = OpenLayers.Util.applyDefaults(defStyle2, OpenLayers.Feature.Vector.style["default"]);
  sm2 = new OpenLayers.StyleMap({
    'default': sty2
  });

  layer = new OpenLayers.Layer.Vector("WFS", {
    styleMap: sm,
    strategies: [new OpenLayers.Strategy.BBOX()],
    protocol: new OpenLayers.Protocol.WFS({
      url: "http://demo.opengeo.org/geoserver/wfs",
      version: "1.0.0",
      featureType: "ne_10m_populated_places",
      // layername: osm:ne_10m_populated_places
      // prefix osm: not needed, as we declare the featureNS
      featureNS: "http://openstreemap.org"
    })
  });

  stil = "info";
  map.addLayers([wms, layer]);
  map.setCenter(new OpenLayers.LonLat(146.7, -41.8), 6);

  var panel_type2 = new OpenLayers.Control.Panel({
    displayClass: 'Panel2'
  });
  map.addControl(panel_type2);

  var redraw = new OpenLayers.Control.Button({
    displayClass: 'first',
    trigger: function() {

      if (stil == "info")

      {
        layer.styleMap = sm2;
        layer.redraw();
       ...