несколько пользовательских маркеров (значков) с различными инфополями

Question

Я создаю карту, где я буду добавлять несколько настраиваемых маркеров, и я хочу, чтобы у каждого из них были разные инфо-окна. Дело в том, что каждый маркер имеет другой значок (эти нумерованные точки, которые вы видите на изображении), и это пример, который не объясняется в образцах кода API GoogleMaps. Я имею в виду, они объясняют вам, как создавать infowindows, но только в том случае, если вы используете переменную , а не для переменной icons. Поэтому я не знаю, где я должен добавить код для infowindow. Сайт выглядит следующим образом:

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

Ответ Хосеп последний вопрос, если я могу (я новичок в Stack Overflow поэтому, пожалуйста, прости мои неточностей), я обновил скрипку http://jsfiddle.net/t7trcpv2/1/, добавив к " функция»объект„заголовок“свойство, где вы можете ввести свои собственные данные

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

Answer 2

попробуйте использовать ЗАКРЫТИЕ таким образом

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




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

    var infowindow = new google.maps.InfoWindow() 

    var content = "" + feature.type 

    google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
     return function() { 
     infowindow.setContent(content); 
     infowindow.open(map,marker); 
     }; 
    })(marker,content,infowindow)); 

    } 

можно изменить Характеристика таким образом

var features = [ 
    { 
    position: new google.maps.LatLng(41.404998, 2.210517), 
    type: 001, 
    message: 'my firts message in info window' 
    //Barcelona 1 
    }, { 
    position: new google.maps.LatLng(41.404371, 2.179131), 
    type: 002, 
    message: 'my second message in info window' 
    //Barcelona 2 
    } 
]; 

или Вы можете добавить новое свойство

вы должны использовать

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

var infowindow = new google.maps.InfoWindow() 

var content = "" + feature.message 

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() { 
    infowindow.setContent(content); 
    infowindow.open(map,marker); 
    }; 
})(marker,content,infowindow));