multiple custom markers (icons) with different infowindows

Question

I'm creating a map where I will be adding multiple custom markers, and I want each of them to have different infowindows. The thing is that every marker has a different icon (those numbered dots you see in the image), and this is an example that is not explained on the GoogleMaps API code samples. I mean, they explain you how to create infowindows, but only in the case you are using the variable marker, and not for the variable icons. Therefore, I don't know where should I add the code for the infowindow. The website looks like this:

website screenshot

 <script>
  var map;
  function initialize() {
      map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      backgroundColor: '#000000',
      center: new google.maps.LatLng(41.404998, 2.210517),
      mapTypeId: 'roadmap',
      streetViewControl: false,

    });

    var iconBase = 'images/numbers/';
    var icons = {
      001: {
        icon: iconBase + '01.png'
      },
      002: {
        icon: iconBase + '02.png'
      }
    };

    function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
    }

    var features = [
      {
        position: new google.maps.LatLng(41.404998, 2.210517),
        type: 001
        //Barcelona 1
      }, {
        position: new google.maps.LatLng(41.404371, 2.179131),
        type: 002
        //Barcelona 2
      }
    ];

 for (var i = 0, feature; feature = features[i]; i++) {
  addMarker(feature);
};    
}

</script>

Answer 1

Answering Josep last question if I may (I'm new in Stack Overflow so please forgive my imprecisions), I updated the fiddle http://jsfiddle.net/t7trcpv2/1/, adding to the 'feature' object a 'title' property where you can input your own data

var map;
var infowindow;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    backgroundColor: '#000000',
    center: new google.maps.LatLng(41.404998, 2.210517),
    mapTypeId: 'roadmap',
    streetViewControl: false,
  });
  infowindow = new google.maps.InfoWindow();
  var iconBase = 'images/numbers/';
  var icons = {
    001: {
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    },
    002: {
      icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
    }
  };

  function addMarker(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      icon: icons[feature.type].icon,
      map: map,

    });
    // must be a string (or a DOM node).
    var content = "" + feature.title
    google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
      return function(evt) {
        infowindow.setContent(content);
        infowindow.open(map, marker);
      };
    })(marker, content, infowindow));

  }

  var features = [{
    position: new google.maps.LatLng(41.404998, 2.210517),
    type: 001,
    title:'title1'
      //Barcelona 1
  }, {
    position: new google.maps.LatLng(41.404371, 2.179131),
    type: 002,
    title: 'title2'
      //Barcelona 2
  }];

  for (var i = 0, feature; feature = features[i]; i++) {
    addMarker(feature);
  };
}
google.maps.event.addDomListener(window, "load", initialize);