javascript - studio - Cambiar el icono del marcador de Google Maps al hacer clic en otro

icono google maps

Question

He creado una página de Ubicaciones múltiples de Google Maps, usando el campo Campos avanzados de Google Custom Fields.

Me las arreglé para hacer que el icono del marcador cambie cuando se hace clic en él, pero quiero que se cambie nuevamente al hacer clic en otros íconos.

aquí hay un ejemplo del código:

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

Mejor aspecto del código de trabajo aquí: http://jsfiddle.net/gargiguy/s8vgxp3g

Answer 1

Lo que dijo Duncan: lo que quieres hacer es agregar todos tus marcadores a una matriz. En su controlador de eventos click, recorra ese conjunto, actualizando el icono de cada marcador. Luego, finalmente configure el ícono solo para el marcador en el que se hizo clic.

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

violín de trabajo

fragmento de código de trabajo:

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

Ya que parece que solo necesitas cambiar el ícono anterior al original, no recomendaría recorrer cada marcador. En un mapa con muchos marcadores, esto podría ser bastante pesado.

En cambio, almacenaba el marcador activo en una variable en el evento click, y simplemente lo actualizo cuando cambia.

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