19WAS85/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <style>
       #map { height: 400px; width: 100% }
       #giftLayer img { display: none }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var element = document.getElementById('map');
        var uluru = { lat: -25.363, lng: 131.044 };
        var mapOptions = { zoom: 4, center: uluru };
        var map = new google.maps.Map(element, mapOptions);

        var icon = {
          url: 'https://image.flaticon.com/icons/png/128/214/214305.png',
          origin: new google.maps.Point(0,0)
        }

        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          icon: icon, // set the icon as catIcon declared above
          optimized: false // must use optimized false for CSS
        });

        var overlay = new google.maps.OverlayView();
        overlay.draw = function () { this.getPanes().markerLayer.id = 'giftLayer' };
        overlay.setMap(map);

        function animateMarkers (animation) {
          document.querySelectorAll('#giftLayer img').forEach(function (e) {
            e.style.display = 'inline';
            e.className += 'animated ' + animation;
          });
        }

        setTimeout(function () { animateMarkers('tada') }, 1000);
        setTimeout(function () { animateMarkers('zoomOutDown') }, 3000);
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlnntQti7ajJvRe1NzuOcrM0qx2idPe94&callback=initMap">
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
	<style>
	#map { height: 400px; width: 100% }
	#giftLayer img { display: none }
	</style>
	</head>
	<body>
	<h3>My Google Maps Demo</h3>
	<div id="map"></div>
	<script>
	function initMap() {
	var element = document.getElementById('map');
	var uluru = { lat: -25.363, lng: 131.044 };
	var mapOptions = { zoom: 4, center: uluru };
	var map = new google.maps.Map(element, mapOptions);

	var icon = {
	url: 'https://image.flaticon.com/icons/png/128/214/214305.png',
	origin: new google.maps.Point(0,0)
	}

	var marker = new google.maps.Marker({
	position: uluru,
	map: map,
	icon: icon, // set the icon as catIcon declared above
	optimized: false // must use optimized false for CSS
	});

	var overlay = new google.maps.OverlayView();
	overlay.draw = function () { this.getPanes().markerLayer.id = 'giftLayer' };
	overlay.setMap(map);

	function animateMarkers (animation) {
	document.querySelectorAll('#giftLayer img').forEach(function (e) {
	e.style.display = 'inline';
	e.className += 'animated ' + animation;
	});
	}

	setTimeout(function () { animateMarkers('tada') }, 1000);
	setTimeout(function () { animateMarkers('zoomOutDown') }, 3000);
	}
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlnntQti7ajJvRe1NzuOcrM0qx2idPe94&callback=initMap">
	</script>
	</body>
	</html>