マーカーがクリックされたときに（クリックイベントで）マーカーアイコンを変更し、別のマーカーがクリックされたときに通常のアイコンに戻すにはどうすればよいですか？
これが私のコードです。このコードでは、ATMと店舗の場所の2つのアイコンを作成しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>OpenStreetMap with Google Maps v3 API</title>
<style type="text/css">
html, body, #map {
position:absolute;
left:100px;
height: 400px;
margin: 0;
padding: 0;
width:400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map; // Variable for Map
var mapOption; // Variable for Options for showing Map
var cromaStorePos = new Array(23); // Array of coordinates of Croma Store.
var cromaStoreCat = new Array(3);
var cromaMarker = new Array(23); // Array of Markers for Croma Store.
// List of Croma stores. Hard coded. These informations can be recieved from webservices.
cromaStoreAdd[0] = "Khanna Building, AA-5, 2nd Avenue, \nAnnanagar, Chennai-6000040.\nPhone: 044-6458 9703/04";
cromaStorePos[0] = new google.maps.LatLng(13.072121,80.261307);
cromaStoreCat[0] = "ATM";
cromaStoreAdd[1] = "Ground Floor, KENCES Towers, No.1,\nRamakrishnan Street,\nNorth Usman Rd., Chennai-600017. \nPhone: +91 044 - 64629816";
cromaStorePos[1] = new google.maps.LatLng(13.05473,80.235901);
cromaStoreCat[1] = "store";
cromaStoreAdd[2] = "Tarapore Towers, 826 Ground Floor, \nAnna Salai, Chennai-600002. \nPhone: +91 044-6458 9715 / 16";
cromaStorePos[2] = new google.maps.LatLng(13.094861, 80.215645);
cromaStoreCat[2] = "ATM";
var element = document.getElementById("map");
var myLatlng = new google.maps.LatLng(13.072121,80.261307);
/*
Build list of map types.
You can also use var mapTypeIds = ["roadmap", "satellite", "hybrid", "terrain", "OSM"]
but static lists sucks when google updates the default list of map types.
*/
var map = new google.maps.Map(element, {
center: myLatlng,
zoom: 12,
disableDefaultUI: true,
panControl: false,
zoomControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
var cromaIcon = 'img/location_icon_atm_blue_blue.png';
var cromaIcon1 = 'img/location_icon_bank_blue_blue.png';
var cromaIcon2='img/pin_bank_Selected_blue.png';
var cromaIcon3='img/pin_atm_selected_blue.png';
// For loop for navigating through the croma stores coordinates and addresses.
for (i=0; i<3; i++)
{
if(cromaStoreCat[i]=="ATM")
{
cromaMarker[i] = new google.maps.Marker({
position: cromaStorePos[i],
map: map,
title: cromaStoreAdd[i],
icon: cromaIcon,
});
onclickMarker(cromaStoreCat[i],cromaMarker);
}
if(cromaStoreCat[i]=="store")
{
cromaMarker[i] = new google.maps.Marker({
position: cromaStorePos[i],
map: map,
title: cromaStoreAdd[i],
icon: cromaIcon1
});
onclickMarker(cromaStoreCat[i],cromaMarker);
}
}
function onclickMarker(category,marker){
google.maps.event.addListener(cromaMarker[i],"click",function(){
switch(category)
{
case 'ATM':
this.setIcon(cromaIcon3);
break;
case 'store':
this.setIcon(cromaIcon2);
break;
}
});
}
//---------------- End of Code for getting address of a particular coordinates. <position> here. ------------------//
//---------------- Code for handling the error -------------------//
function showError(err)
{
if (err.code == 0)
{
divMap.innerHTML = "Unknown error..";
}
else if (err.code == 1)
{
divMap.innerHTML = "User do not want to share its location.";
}
else if (err.code == 2)
{
divMap.innerHTML = "Sorry, But your position is not available.";
}
else if (err.code == 3)
{
divMap.innerHTML = "Sorry, But your request has timed out.";
}
}
</script>
</body>
</html>
Can anyone help me in this regard...
Thanks in advance.....