Marker Animation Drop Callback

I'm working with google maps, I have this _marker() function. I am currently using a setTimeout with 6 seconds to delay the callback so that it runs after the marker has been dropp

Solution 1:

Here's a delayMarker function kind of works the same way as the original one, unless there's a method that allows you to create a marker without showing it, then show and animate it, I'm not sure if there's a better way.

Demo on JSBIN

functioninitMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var googleMapsIcon = new google.maps.MarkerImage(
    'http://maps.google.com/mapfiles/ms/micons/red-dot.png',
    new google.maps.Size(32, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(16, 32)
  )

  functiondelayMarker ({place = {}, position, map, timeout}, callback) {

    var marker = {
      clickable: false,
      draggable: false,
      position: new google.maps.LatLng(position.lat, position.lng),
      map: map,
      animation: google.maps.Animation.DROP,
      icon: googleMapsIcon
    }

    if (timeout && callback) {
      returnsetTimeout(function(){
        returncallback(new google.maps.Marker(marker))
      }, timeout)  
    } else {
      return marker  
    }
  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: myLatLng,
    scrollwheel: false,
    zoom: 4
  })

  var marker = delayMarker({
    map: map,
    position: myLatLng,
    timeout: 2000,
  }, () => {
    console.log('done')
  })

}