Jump to content
Search Community

Animating Google Maps Markers

babycheeses test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...