Marker animation drop callback

Question

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 dropped. I've been looking in the documentation and tried something like gmaps.event.addListenerOnce(marker, 'idle', function(... with no luck. Does anyone know of a marker animation-drop event so I can legitimize this callback?

var _marker = function(place, map, callback){
    var marker = new gmaps.Marker({
        clickable: false,
        draggable: false,
        position: new gmaps.LatLng(place.latitude, place.longitude),
        map: map,
        animation: gmaps.Animation.DROP,
        icon: new gmaps.MarkerImage(
            'http://maps.google.com/mapfiles/ms/micons/red-dot.png',
            new gmaps.Size(32, 32),
            new gmaps.Point(0,0),
            new gmaps.Point(16, 32)
        )
    });
    if(typeof callback !== "undefined"){
        setTimeout(function(){
            return callback(marker);
        }, 600);
    }else{
        return marker;
    }
}

Answer 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

function initMap() {
  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)
  )

  function delayMarker ({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) {
      return setTimeout(function(){
        return callback(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')
  })

}