My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 3608: Bug: Marker flickers at final position before drop animation
25 people starred this issue and may be notified of changes. Back to list
Status:  Fixed
Owner:  ----
Closed:  Feb 2012


Sign in to add a comment
 
Reported by [email protected], Sep 8, 2011
When adding a marker with a drop animation to the map, the marker 
* briefly appears at its final location
* disappears
* animates into place

Instead, the marker should just animate into place.

You can observe this behavior on the Google Maps animation API example (although you'll have to watch carefully because the flicker is very brief):
https://code.google.com/apis/maps/documentation/javascript/examples/marker-animations-iteration.html

Observed on Google Chrome for Windows v. 13.0.782.220 m
Oct 4, 2011
#1 [email protected]
I can duplicate this too. Chrome/Mac 14.0.835.202.

Doesn't duplicate in Safari.

FWIW, I worked around this by positioning the marker at 0,0, then back to the intended position after a 50ms setTimeout. Hacky, but I really dig the animation, so I'll live with it for now :)
Oct 28, 2011
#2 [email protected]
Brent, can you go into more detail about your workaround? I'm hitting the same bug and don't know how to fix it.
Jan 17, 2012
#3 [email protected]
Same here in Chrome 16.0.912.75, on Windows.
Jan 23, 2012
Project Member #4 [email protected]
(No comment was entered for this change.)
Status: Acknowledged
Labels: Internal-5908221
Feb 19, 2012
#5 [email protected]
(No comment was entered for this change.)
Status: Fixed
Jun 1, 2012
#6 [email protected]
I've already see this behaviour. When the marker drops into the map flickers at final position. It only happens when the marker has a shadow attached to it. if there's no shadow, there is no flicker.
Aug 29, 2012
#7 [email protected]
why is this marked as fixed when it's not? chrome 21.0.1180.83
Sep 5, 2012
#8 [email protected]
Fix this please.

Sep 5, 2012
#9 [email protected]
We've made some improvements. If this is critical for your application: use non-optimized markers.
Oct 29, 2012
#10 [email protected]
This still does not work properly in Chrome...even with optimized set to false. I also tried a suggestion above of removing the shadow by setting the marker 'flat' property to true. The markers still flicker!

Any updates please???
Nov 18, 2012
#11 [email protected]
This is certainly not a critical problem, but I too reproduce this on Version 25.0.1326.0 canary on Mac OS X.6.8 and setting optimized to false did not help for me either.  One further observation, flicker seems to only happen with second and later markers added to map.
Apr 26, 2013
#12 [email protected]
confirm #11
http://gmaps-samples-v3.googlecode.com/svn/trunk/markeranimations/markeranimations.html
and start adding more markers
Chrome Version 26.0.1410.65 on OS X 10.8.3 (12D78)

May 15, 2013
#13 [email protected]
Still having this issue.  Optimized: false does not fix.
Jul 3, 2013
#14 [email protected]
Still having this issue.
Jul 8, 2013
#15 [email protected]
Started making an internal maps project for my company and I can confirm this issue on the newest version of Chrome. It's really bothering me cause I'm going to pretty serious lengths to ensure that only new pins in the searched area drop so as to better visually inform the user of what is outside the intersection of the new and past search results. The flicker fights that slightly :/
Jul 15, 2013
#16 [email protected]
Same issue here.

Happens on Chrome with custom PNG icons (other than default red marker), even with no shadows.
Jul 23, 2013
#17 [email protected]
Happens in Chrome version 28.0.1500.71 with red default markers
Jul 29, 2013
#18 [email protected]
Confirm on OSX, Version 28.0.1500.71
Aug 22, 2013
#20 [email protected]
Confirmed on Chrome 28.0.1500.95, Windows 7
Both with custom PNG draggable marker within my own project and the default red marker at http://gmaps-samples-v3.googlecode.com/svn/trunk/markeranimations/markeranimations.html
I've tried making my marker non-optimized but the issue persists.
The issue is not fixed.
Aug 23, 2013
#21 [email protected]
I still vote for a fix!  But, here is somewhat of what you may consider a workaround...rather than using DROP, try the BOUNCE animation, and then change it to null after a certain period of time to simulate a drop.  It's not as dramatic as the drop, but it creates at least a nice, smooth animation.  I found that setting animation to null after 1150ms creates a nice smooth bounce:

marker = new google.maps.Marker({
    map:map,
    animation: google.maps.Animation.BOUNCE,
    position: leverage,
    icon: image
  });
  
  setTimeout(function() {
    marker.setAnimation(null); // this stops the bouncing
  }, 1150);

You can see a live example here if you scroll to the bottom: https://leveragenewagemedia.com/
Aug 27, 2013
#22 [email protected]
Same issue on Chrome 28 on Ubuntu 13.04.

Setting optimized to false helped.
Nov 14, 2013
#23 [email protected]
Confirmed issue on Chrome Version 31.0.1650.48 using Mac OS X 10.9 (13A603)

Nov 15, 2013
#24 [email protected]
Reproduced in Chrome v 30.0.1599.101 on OS X 10.9 (13A603).

Setting the marker's optimized flag to false *didn't* help in my case.
Nov 15, 2013
#25 [email protected]
Same here, setting optimized flag helps a bit but flickering still happens
Feb 12, 2014
#27 [email protected]
Reproduced in Chrome Version 32.0.1700.107 on Ubuntu 12.04 and Chrome Version 32.0.1700.107 on Windows 7.

Setting the optimized flag to false did not help.
Jun 24, 2014
#28 [email protected]
This is proudly becoming a three year bug.
Jul 25, 2014
#29 [email protected]
Please fix this!

Issue can be seen at this fiddle:

http://jsfiddle.net/4HS3R/
Jul 29, 2014
#30 [email protected]
Can confirm still an issue Mac 10.8.5. Chrome Version 36.0.1985.125
Aug 5, 2014
#31 [email protected]
I figured out a hacky workaround. Just set the map marker icon as an invisible .png, then setTimeout 100-150 ms and set the marker icon to be something else. 

It fixes it for most computers, obviously not ideal tho. Hope that helps
Nov 9, 2014
#32 humberto.cruz
create the image fist and put some additional infos about the markers: 
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)
};
Mar 2, 2015
#33 [email protected]
Mac OS 10.10 Chrome Version 40.0.2214.115 (64-bit)
Still flickers before the bounce.
Mar 24, 2015
#34 [email protected]
Still flickers on Mac OS 10.10.2, Chrome Version 41.0.2272.104 (64-bit).
Why is this issue marked as fixed?
Jul 17, 2015
#35 [email protected]
Problem still not fixed.
Aug 24, 2015
#36 [email protected]
And still not fixed, running Version 44.0.2403.157 m of Chrome.

Works fine in Edge (WOWWOWWOWWOWWOWWOW)

So I guess MS > Google?
Aug 24, 2015
#37 [email protected]
FYI comment #21 solved it, but I decreased the timeout to 775MS.
Sep 17, 2015
#38 [email protected]
Comment #32 worked for me, to clarify:

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,
    animation: google.maps.Animation.DROP
});
Sign in to add a comment

Powered by Google Project Hosting