plusieurs marqueurs personnalisés (icônes) avec différents infowindows

Question

Je crée une carte dans laquelle j'ajouterai plusieurs marqueurs personnalisés, et je souhaite que chacun d'entre eux ait des infowindows différents. Le fait est que chaque marqueur a une icône différente (les points numérotés que vous voyez dans l'image), et ceci est un exemple qui n'est pas expliqué sur les exemples de code API GoogleMaps. Je veux dire, ils vous expliquent comment créer infowindows, mais seulement dans le cas où vous utilisez la variable , et non pour la variable icons. Par conséquent, je ne sais pas où devrais-je ajouter le code pour l'infowindow. Le site ressemble à ceci:

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

Répondre Josep dernière question si je (je suis nouveau dans Stack Overflow donc s'il vous plaît pardonnez mes imprécisions), je mis à jour le violon http://jsfiddle.net/t7trcpv2/1/, ajoutant à la ' fonction » objet a « titre » propriété où vous pouvez entrer vos propres données

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

essayer d'utiliser la fermeture de cette façon

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

    } 

vous pouvez modifier les caractéristiques de cette façon

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

ou vous pouvez ajouter une nouvelle propriété

vous devez utiliser

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