I have an application that uses a Google map and shows multiple markers.
Next to the map I will list the addresses and I would like, when the user gives a mouseover
for each address, the map icon will change.
So I have (to show the markers):
for (var i = 0; i < lat.length-1; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat[i], long[i]),id:i, title: nomes[i], icon: pinImage, label: {text: ""+(i+1)+"", color: "white"} ,
map: map
});
And I have (to capture mouseover
in the link):
$("a[data-link]").mouseover(function() {
var idNumber = $(this).data("link");
var novocentro = new google.maps.LatLng(lat[idNumber-1], long[idNumber-1]);
map.setZoom(14);
map.setCenter(novocentro);
});
I can already centralize the map to the location and zoom in. But I can not change the ICON of the marker. Imagine you could do something like this:
marker[idNumber].setIcon = "xxxx"
But that does not work.