Josep Fonti Josep Fonti - 6 months ago 36
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:

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++) {

Hope you can help!


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++) {

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.