Индивидуальные и пронумерованные значки + информационные окна с Google Maps Api 3

Question

Сначала хочу сказать, что я новичок в этом и не имею много знаний Javascript. Просто нужно создать веб-сайт, но не можете позволить себе заплатить кому-то другому за это!

Что я пытаюсь построить, это карта, где я могу найти несколько разных маркеров, которые я создал сам. Это файлы .png не более 20 КБ. Я загрузил их на свой сервер внутри изображений/номеров /. Они выглядят так:

Я, вероятно, нужно больше, чем 50, каждый из которых также со своим собственным InfoWindow.

Это пример, который я пытался изменить, но не мог заставить его работать:

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

Здесь Javascript код, который я до сих пор:

 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); 
    } 
    } 

Надеется, что вы можете помочь ! Thankssss

Answer 1

Основная проблема, которую я вижу в вашей петле for.

Попробуйте заменить его следующим образом:

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

Тогда, как @MrUpsidown упоминалось в комментариях, вы должны правильно определить свои объекты в icons массиве.

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

Поскольку в features, она определяется как строка, оно должно быть одинаковым в icons.

Остальное выглядит нормально.