Add markers with animation by clicking on map

drop animation when placing the marker. Click on map to move the marker to a new position with smooth animation

by user2314737

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg"></script>
<div id="map"></div>

CSS

html,
body {
  height: 100%;
}

#map {
  height: 100%;
  width: 100%;
}

JavaScript

var icon

function initMap() {
  var myOptions = {
      zoom: 5,
    },
    map = new google.maps.Map(document.getElementById('map'), myOptions);

  icon = {
    path: "M27.648-41.399q0-3.816-2.7-6.516t-6.516-2.7-6.516 2.7-2.7 6.516 2.7 6.516 6.516 2.7 6.516-2.7 2.7-6.516zm9.216 0q0 3.924-1.188 6.444l-13.104 27.864q-.576 1.188-1.71 1.872t-2.43.684-2.43-.684-1.674-1.872l-13.14-27.864q-1.188-2.52-1.188-6.444 0-7.632 5.4-13.032t13.032-5.4 13.032 5.4 5.4 13.032z",
    fillColor: '#E32831',
    fillOpacity: 1,
    strokeWeight: 0,
    scale: 0.65
  };
  marker = new google.maps.Marker({
    map: map,
    icon: icon,
    animation: google.maps.Animation.DROP,
  });

  map.setCenter(new google.maps.LatLng(-33.8688, 151.2093));
  marker.setPosition(map.getCenter());
  map.addListener('click', function(e) {

    animatedMove(marker, 10, marker.position, e.latLng);
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

function animatedMove(marker, n, current, moveto) {
  var lat = current.lat();
  var lng = current.lng();

  var deltalat = (moveto.lat() - current.lat()) / 100;
  var deltalng = (moveto.lng() - current.lng()) / 100;

  for (var i = 0; i < 100; i++) {
    (function(ind) {
      setTimeout(
        function() {
          var lat = marker.position.lat();
          var lng = marker.position.lng();

          lat += deltalat;
          lng += deltalng;
          latlng = new google.maps.LatLng(lat, lng);
          marker.setPosition(latlng);
        }, 10 * ind
      );
    })(i)
  }
}