title: Using custom markers instead of default marker (Openlayers)
body: <p>This is a simple problem but I'm tangled up in the code and can't figure out the solution; hope someone can help!</p>
  
  <p>I have three markers on a map and want each marker to be a different icon.</p>
  
  <p>I can't work out where to make this happen - do I need to redraw?</p>
  
  <p>I have seen this question <a href="https://stackoverflow.com/questions/3785915/openlayers-problem-with-marker-icons?rq=1">OpenLayers problem with marker icons</a> , but don't understand how to implement the solution.</p>
  
  <p>My code:</p>
  
  <pre><code>      function init() {
      map = new OpenLayers.Map("basicMap");
      var mapnik         = new OpenLayers.Layer.Stamen("toner-background");
      var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
      var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
      var position       = new OpenLayers.LonLat(30,55.515).transform( fromProjection, toProjection);
      var zoom           = 4; 
  
      map.addLayer(mapnik);
      map.setCenter(position, zoom );
  
  
  var markers = new OpenLayers.Layer.Markers( "Markers" );
  map.addLayer(markers);
  
  var icon1 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
  var icon2 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-gold.png', size, offset);
  var icon3 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-green.png', size, offset);
  
          var lonLat1 = new OpenLayers.LonLat(0.1062,51.5171).transform(
                          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                          map.getProjectionObject() // to Spherical Mercator Projection
                          );
  
  
          var lonLat2 = new OpenLayers.LonLat(2.3470,48.8742).transform(
                          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                          map.getProjectionObject() // to Spherical Mercator Projection
                          );
  
                          var lonLat3 = new OpenLayers.LonLat(7.2692,43.7028).transform(
                          new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                          map.getProjectionObject() // to Spherical Mercator Projection
                          );
  
  var marker1 = new OpenLayers.Marker(lonLat1);
      var size = new OpenLayers.Size(21,25);
      var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
      marker1.icon.size = size;
  marker1.icon.offset = offset;
  
  var feature = new OpenLayers.Feature(markers, lonLat1);
  feature.closeBox = true;
  feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
  feature.data.popupContentHTML = '&lt;p&gt;Marker1&lt;p&gt;';
  feature.data.overflow = "hidden";
  
  marker1.feature = feature;
  
  
  var markerClick = function (evt) {
      if (this.popup == null) {
          this.popup = this.createPopup(this.closeBox);
          map.addPopup(this.popup);
          this.popup.show();
      } else {
          this.popup.toggle();
      }
      OpenLayers.Event.stop(evt);
  };
  marker1.events.register("mousedown", feature, markerClick);
  
  var marker2 = new OpenLayers.Marker(lonLat2);
          var size = new OpenLayers.Size(21,25);
      var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
  
  
  
  var feature = new OpenLayers.Feature(markers, lonLat2);
  
  feature.closeBox = true;
  feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
  feature.data.popupContentHTML = '&lt;p&gt;Marker2&lt;p&gt;';
  feature.data.overflow = "hidden";
  marker2.feature = feature;
  
  var markerClick = function (evt) {
      if (this.popup == null) {
          this.popup = this.createPopup(this.closeBox);
          map.addPopup(this.popup);
          this.popup.show();
      } else {
          this.popup.toggle();
      }
      OpenLayers.Event.stop(evt);
  };
  marker2.events.register("mousedown", feature, markerClick);
  
  
  
  var marker3 = new OpenLayers.Marker(lonLat3);
          var size = new OpenLayers.Size(21,25);
      var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
      marker3.icon.size = size;
  marker3.icon.offset = offset;
  var feature = new OpenLayers.Feature(markers, lonLat3);
  feature.closeBox = true;
  feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
  feature.data.popupContentHTML = '&lt;p&gt;Marker 3&lt;p&gt;';
  feature.data.overflow = "hidden";
  
  marker3.feature = feature;
  
  var markerClick = function (evt) {
      if (this.popup == null) {
          this.popup = this.createPopup(this.closeBox);
          map.addPopup(this.popup);
          this.popup.show();
      } else {
          this.popup.toggle();
      }
      OpenLayers.Event.stop(evt);
  };
  marker3.events.register("mousedown", feature, markerClick);
  
  markers.addMarker(marker1, icon1);
  
  markers.addMarker(marker2, icon2);
  
  markers.addMarker(marker3, icon3);
  
    }
  </code></pre>
  
  <p>Thanks!</p>