| 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 |
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]
Oct 28, 2011
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
Same here in Chrome 16.0.912.75, on Windows.
Jan 23, 2012
(No comment was entered for this change.)
Status:
Acknowledged
Labels: Internal-5908221
Feb 19, 2012
(No comment was entered for this change.)
Status:
Fixed
Jun 1, 2012
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
why is this marked as fixed when it's not? chrome 21.0.1180.83
Sep 5, 2012
Fix this please.
Sep 5, 2012
We've made some improvements. If this is critical for your application: use non-optimized markers.
Oct 29, 2012
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
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
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
Still having this issue. Optimized: false does not fix.
Jul 3, 2013
Still having this issue.
Jul 8, 2013
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
Same issue here. Happens on Chrome with custom PNG icons (other than default red marker), even with no shadows.
Jul 23, 2013
Happens in Chrome version 28.0.1500.71 with red default markers
Jul 29, 2013
Confirm on OSX, Version 28.0.1500.71
Aug 22, 2013
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
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
Same issue on Chrome 28 on Ubuntu 13.04. Setting optimized to false helped.
Nov 14, 2013
Confirmed issue on Chrome Version 31.0.1650.48 using Mac OS X 10.9 (13A603)
Nov 15, 2013
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
Same here, setting optimized flag helps a bit but flickering still happens
Feb 12, 2014
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
This is proudly becoming a three year bug.
Jul 25, 2014
Please fix this! Issue can be seen at this fiddle: http://jsfiddle.net/4HS3R/
Jul 29, 2014
Can confirm still an issue Mac 10.8.5. Chrome Version 36.0.1985.125
Aug 5, 2014
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
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
Mac OS 10.10 Chrome Version 40.0.2214.115 (64-bit) Still flickers before the bounce.
Mar 24, 2015
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
Problem still not fixed.
Aug 24, 2015
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
FYI comment #21 solved it, but I decreased the timeout to 775MS.
Sep 17, 2015
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 |