jQuery addClass example

Change class name on click in jQuery

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<div>
  <div id="marker_1" style="background-color:blue;">
    Marker 1
  </div>
  <div id="marker_2" style="background-color:red;">
    Marker 2
  </div>
  <div id="marker_3"  style="background-color:green;">
    Marker 3
  </div>
  <div id="marker_4"  style="background-color:green;">
    Marker 4
  </div>
</div>
<div id="map_canvas" style="width:100%; height:100%"></div>

CSS

html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
	  #map_canvas img{
		background:none;
	  }

JavaScript

var tam = [16.3,108];
		var locations = [[16.5,108.5,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q","marker_1"],
					[16.3,108,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q", "marker_2"],
					[16,107,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q", "marker_3"],
					[23,105,"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQxFoh469eOsZQkuPOLpZn3R6yyIExkZCxOxf4ywfeY3v330EwP3Q","marker_4"]];
         
		function initialize() {
        var myOptions = {	
          center: new google.maps.LatLng(tam[0], tam[1]),
          zoom: 3,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
		
			var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
			
		
			for (var i = 0; i < locations.length; i++) {
				var beach = locations[i];
        
          urlimg =  beach[2];
          var image = new google.maps.MarkerImage(
                urlimg,
                null,
                null,
                null,
                new google.maps.Size(15, 15)); 								

          var myLatLng = new google.maps.LatLng(beach[0], beach[1]);
				
          marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            draggable : true,
            animation : google.maps.Animation.DROP
          });
          (function(_beach,_marker){
          $('#' + _beach[3]).on('mouseover', function(e){
                 _marker.setAnimation(google.maps.Animation.BOUNCE);
          });
				})(beach,marker);
			}
			//setMarkers(map, beaches);	
		}
    $(document).ready(function(){
    	initialize();
    });