Changing marker image is easy via css , you can do so by using the below code

img[src^=’http://www.google.com/mapfiles/marker.png?i=’]{
opacity: 0.5
}

function initialize() {
var index=0;
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(‘map_canvas’),
mapOptions);

marker=new google.maps.Marker({position:map.getCenter(),
map:map,optimized:false,
icon:’http://www.google.com/mapfiles/marker.png?i=’+(index++)});

google.maps.event.addListener(marker,’mouseover’,function(){
$(‘img[src=”‘+this.icon+'”]’).stop().animate({opacity:1});
});

google.maps.event.addListener(marker,’mouseout’,function(){
$(‘img[src=”‘+this.icon+'”]’).stop().animate({opacity:.5});
});
}

google.maps.event.addDomListener(window, ‘load’, initialize);

LEAVE A REPLY