Customized and numbered icons + info windows with Google Maps Api 3

Question

First want to say that I'm new in this and don't have a lot of Javascript knowledge. Just need to create a website but can't afford paying someone else do it for me!

What I'm trying to build is a map where I can locate multiple different markers that I created myself. They are .png files no bigger than 20KB. I have loaded them to my server inside images/numbers/. They look like this:

I will probably need more than 50, each one also with its own infowindow.

This is an example I tried to edit, but couldn't make it work:

https://developers.google.com/maps/documentation/javascript/tutorials/custom-markers?hl=es

Here the javascript code I have so far:

     var map;
  function initialize() {
      map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: new google.maps.LatLng(41.388426, 2.171339),
      mapTypeId: 'roadmap'

    });

    var iconBase = 'images/numbers/';
    var icons = {
      001: {
        icon: iconBase + '001.png'
      },
      002: {
        icon: iconBase + '002.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.388426, 2.171339),
        type: '001'
      }, {
        position: new google.maps.LatLng(41.387815, 2.139496),
        type: '002'
      }
    ];

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

Hope you can help! Thankssss

Answer 1

The main problem I can see is in your for loop.

Try to replace it with this:

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

Then, like @MrUpsidown mentioned in the comments, you should define your objects correctly in the icons array.

var icons = {
  '001': {
    icon: iconBase + '001.png'
  },
  '002': {
    icon: iconBase + '002.png'
  }
};

Since in features, it is defined as string, it should be the same in icons.

The rest looks to be ok.