Animating Google Maps Markers

[babycheeses]

I'm trying to make an animated map of sorts by having markers show up on google maps at a certain time/after a certain amount of time has passed.  I've only found one other post on how to move a marker, but can't seem to "select" the marker to change the opacity.  I've got it working with setTimeout, but I would like the ability to scrub the animation, which seems to be quite difficult/slow without GS given the number of points I'm trying to animate.  I've included a codepen with 2 points.  

 

 

The only thing I can think of doing is to create all the markers with initial opacity of 0 and then change the opacity of them in the order that I want.  Due to the crowdedness, I want the markers to "disappear" after a couple of seconds.  (in the example, I thought it'd be easier to start with opacity at 1 and fade to 0 to show that the markers do show up correctly).

 

 

Is there an easier way to debug this?  ie some way to tell if I'm even selecting the google maps marker with greensock?  I'm not sure how to start to figure out what's not working 

 

See the Pen rgvXJq by azhao (@azhao) on CodePen

[GreenSock]

Welcome to the forums, @babycheeses. This sounds like more of a Google Maps API question than a GSAP question. Unfortunately I don't have time to research all the ins and outs of how to build maps and markers. Have you reached out to the Google Maps community? 

 

My suggestion would be to just focus on manually changing the position of a marker (after creating it) so that you understand the API properly, and THEN start trying to animate it with GSAP. Once you know how to update/alter the x/y (position) of the marker(s), that'll probably make it very easy to wire up GSAP to actually animate it. After all, GSAP is just a super-fast property updater