Custom marker with animation

In this tutorial I will show you how to add custom marker with animation on google map. We will use an image as a marker and set a bounce animation on this, so when we click on the image it will start bounce.

google.maps.Marker provides a icon option to replace the default marker icon with our own marker icon/image. Here is a simple example code of custom marker with animation.

<!DOCTYPE html>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Custom marker with animation</title>

      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px

    <script src=""></script>
		function initialize() {
			var myLatlng = new google.maps.LatLng(40.714,-74.005);
			var mapOptions = {
				zoom: 7,
				center: myLatlng
			var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

			var image = 'hit-me.png';
			var marker = new google.maps.Marker({
				position: myLatlng,
				map: map,
				animation: google.maps.Animation.DROP,
				title: 'Hello World!',

			google.maps.event.addListener(marker, 'click', toggleBounce);
			function toggleBounce() {
				if (marker.getAnimation() != null) {
				} else {

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


<div id="map-canvas"></div>