Измените значок маркера Google Maps при нажатии на другое

Question

Я создал страницу с несколькими местоположениями в Google Картах, , используя поле «Дополнительные поля для пользовательских полей».

Мне удалось изменить значок маркера при нажатии, но я хочу, чтобы он был изменен при нажатии на другие значки.

вот пример кода:

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

Лучше внешний вид рабочего кода здесь: http://jsfiddle.net/gargiguy/s8vgxp3g

Answer 1

Что Данкан сказал: Что вы хотите сделать, это добавить все маркеры в массив , В обработчике событий клика перебирайте этот массив, обновляя значок каждого маркера. Затем, наконец, установите значок только для маркера, который был нажат.

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

working fiddle

работает фрагмент кода:

var markers = []; 
 
var map; 
 

 
function initialize() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 12, 
 
    // center: new google.maps.LatLng(-33.92, 151.25), 
 
    center: new google.maps.LatLng(36.8857, -76.2599), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/'; 
 
    var marker, i; 
 

 
    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); 
 
     for (var j = 0; j < markers.length; j++) { 
 
      markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png"); 
 
     } 
 
     marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); 
 
     }; 
 
    })(marker, i)); 
 
    markers.push(marker); 
 

 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var locations = [ 
 
    [ 
 
    "New Mermaid", 
 
    36.9079, -76.199, 
 
    1, 
 
    "Georgia Mason", 
 
    "", 
 
    "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.", 
 
    "coming soon" 
 
    ], 
 
    [ 
 
    "1950 Fish Dish", 
 
    36.87224, -76.29518, 
 
    2, 
 
    "Terry Cox-Joseph", 
 
    "Rowena's", 
 
    "758 W. 22nd Street in front of Rowena's", 
 
    "found" 
 
    ], 
 
    [ 
 
    "A Rising Community", 
 
    36.95298, -76.25158, 
 
    3, 
 
    "Steven F. Morris", 
 
    "Judy Boone Realty", 
 
    "Norfolk City Library - Pretlow Branch, 9640 Granby St.", 
 
    "found" 
 
    ], 
 
    [ 
 
    "A School Of Fish", 
 
    36.88909, -76.26055, 
 
    4, 
 
    "Steven F. Morris", 
 
    "Sandfiddler Pawn Shop", 
 
    "5429 Tidewater Dr.", 
 
    "found" 
 
    ], 
 
    [ 
 
    "Aubrica the Mermaid (nee: Aubry Alexis)", 
 
    36.8618, -76.203, 
 
    5, 
 
    "Myke Irving/ Georgia Mason", 
 
    "USAVE Auto Rental", 
 
    "Virginia Auto Rental on Virginia Beach Blvd", 
 
    "found" 
 
    ] 
 
];

<script src="http://maps.google.com/maps/api/js"></script> 
 
<div> 
 
    <div id="map" style="width: 500px; height: 400px;"></div> 
 
</div>

Answer 2

Поскольку это звучит, как вам нужно только изменить предыдущий значок назад к оригиналу, я бы не стал рекомендуем прокручивать каждый маркер. На карте с большим количеством маркеров это может стать довольно тяжелым.

Вместо этого я бы сохранил активный маркер в переменной в событии клика и просто обновил его при его изменении.

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