Changement de Google Maps marqueur icône en cliquant sur les autres

J'ai créé une carte Google Maps de Multiples endroits de la page,
l'utilisation Avancée des Champs Personnalisés de Google Map champ.

J'ai réussi à faire le marqueur de changement d'icône lorsque l'on clique dessus, mais je veux qu'il soit modifié à nouveau en cliquant sur les icônes.

voici un exemple de code:

    for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: iconBase + 'Stock%20Index%20Up.png'
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0], locations[i][6]);
      infowindow.open(map, marker);
      marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png");
    }
  })(marker, i));

Meilleur regard du code du travail ici:
http://jsfiddle.net/gargiguy/s8vgxp3g

Ce que vous voulez faire est d'ajouter tous vos marqueurs pour un tableau. Dans votre gestionnaire d'événements click, boucle sur ce tableau, la mise à jour de chaque marqueur de l'icône. Puis, enfin, définir l'icône pour tout le marqueur qui a été cliqué.
pouvez-vous me donner un exemple de code simple?
Veuillez fournir une un Minimum, Complètes et Vérifiables exemple de votre code existant.
J'ai édité ma question code
Comment sur les données de l'échantillon pour locations? (ou tout simplement le code du navigateur voit). Un minimum, complet exemple devrait inclure tout le HTML/CSS et javascript externes requis pour exécuter le code.

OriginalL'auteur gargi | 2015-01-03

  1. 2

    Vous pouvez faire de même, comme ci-dessous:

    var prevMarker = "";
var markers = [];
var image = { url: "your_png.png",
              scaledSize: new google.maps.Size(38, 40) //If you want to resize it.
            };

    Pour créer des repères,

    var marker = createMarker(coordinate, map, image, id);  
//coordinate = {lat:float value,long:float value} and 'map' your map
function createMarker(lat, long, map, image, marker_id) {

    var coordinates = {lat: lat, lng: long};
    var marker = new google.maps.Marker({
                position: coordinates,
                icon: image,
                id: "marker_" + marker_id,
                map: map
    });

    return marker;
}

    Pour le marqueur d'action que vous pouvez utiliser.

    marker.addListener('click', function() {
        console.log(this.id);

        if(prevMarker !== "") {
            prevMarker.setIcon({
                url: "your_image.png",
                scaledSize: new google.maps.Size(38, 40)
            });
        }
        prevMarker = this;
        this.setIcon({
            url: "your_image.png",
            scaledSize: new google.maps.Size(48, 50)
        });
        map.panTo(this.getPosition());
    });

    marqueur de boucle de code pour tous les marqueurs disponibles.

    Avertissement. Même marqueur peut être cliqué plusieurs fois, cela peut avoir besoin de codage supplémentaire.
    Si même marqueur cliquez dessus, il va exécuter la même ligne de code, mais sur l'INTERFACE utilisateur il n'y aura pas le moindre effet. Si vous ne voulez pas exécuter les mêmes marqueurs de code que vous pouvez écrire ignorer code. ex. prevMarker === ce, puis retourner.

    OriginalL'auteur Nahush Sarje

  2. 1

    Car il sonne comme vous avez seulement besoin de changer l'icône précédente en arrière à l'original, je ne recommanderais pas une boucle dans chaque marqueur. Une carte avec beaucoup de marqueurs, cela pourrait devenir très lourd.

    Au lieu de cela, je voudrais stocker le marqueur actif dans une variable sur l'événement click, et juste mise à jour lorsque des changements.

    var marker;
var activeMarker;
var iconDefault = iconBase + 'Stock%20Index%20Up.png';
var iconSelected = 'https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png';

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: iconDefault
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0], locations[i][6]);
      infowindow.open(map, marker);

      //check to see if activeMarker is set
      //if so, set the icon back to the default
      activeMarker && activeMarker.setIcon(iconDefault);

      //set the icon for the clicked marker
      marker.setIcon(iconSelected);

      //update the value of activeMarker
      activeMarker = marker;
    }
  })(marker, i));
}

    OriginalL'auteur Ryan Little