Maps API v3 bouncing marker

by katalin_2003

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
  height: 400px;
  width: 500px;
}

JavaScript

var map;
var marker;

function initialize() {
    
    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(0,0)
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    marker = new google.maps.Marker({
        map:map,
        draggable: true,
        position: new google.maps.LatLng(0,0)
   });
    
    google.maps.event.addListener(marker, 'mouseover', function() {
        this.setAnimation(google.maps.Animation.BOUNCE);
    });
    
    google.maps.event.addListener(marker, 'mouseout', function() {
        this.setAnimation(null);
    });
    
}

initialize();