How can I change a marker icon when a marker is clicked (on a click event) and return it back to a normal icon when another marker is clicked?
Here is my code. In this code,i created two icons for ATM and Store location.
<!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.....
I don’t know how you mark and unmark them.
Why don’t you just for loop and unmark all of them and then mark only one that has been clicked?
try use jquery like this
http://jsfiddle.net/jtjgY/
or simple loop like this
http://jsfiddle.net/3M5CS/1/