Custom marker icon in Google maps pops up before animation

Question

I have the following code to add a marker to my map:

var marker = new google.maps.Marker({
    icon: '/pin.png',
    map: map,
    position: latlng,
    draggable: false,
    title: trip_name,
    animation: google.maps.Animation.DROP
});

Everything works fine except the icon pops up for a split second before running the animation. Has anyone else encountered this problem?

Answer 1

I was experiencing this same behavior and I found that further defining the custom icon helped fix this issue.

var image = {
    url: 'images/map_marker.png',
    // This marker is 20 pixels wide by 30 pixels tall.
    size: new google.maps.Size(20, 30),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the image at 0,30.
    anchor: new google.maps.Point(10, 30)
};

var marker = new google.maps.Marker({
   icon: image,
   map: map,
   position: latlng,
   draggable: false,
   title: trip_name,
   animation: google.maps.Animation.DROP
});