google.maps.Marker:custom animations

see: http://stackoverflow.com/questions/22047466/how-to-add-css-class-to-a-googlemaps-marker

by bizamajig

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;.js"></script>
<div id="map_canvas" style="height:300px;"></div>

CSS

html,body,#map_canvas{
height:100%;
    margin:0;
}
img[src^='http://www.google.com/mapfiles/marker.png?i=']{
  opacity: 0.5
}

JavaScript

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