Josep Fonti Josep Fonti - 1 month ago 9
Javascript Question

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

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:

enter image description here

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

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.