Jump to content
Search Community

Google map Marker moving along path?

thipages test
Moderator Tag

Go to solution Solved by Carl,

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 try to move a Google Map marker along a Bezier Curve using TweenMax and its bezier property.

However Google Map Marker has only setPosition method to update position.

How can I feed the bezier property (see below) ?

Thanks for your help

var marker = new google.maps.Marker();
var bezier = new TweenMax(marker, 6, {
Link to comment
Share on other sites

Hello thipages, and Welcome to the GreenSock forum!

We love code we can test live. Do you have a code example of what you have tried so we can see your code example in context?

Here is a video tut on how to create a codepen example.

This way we can test your code live on codepen to better help you!

Thanks! :)
Link to comment
Share on other sites

  • Solution

Thanks for the demo. Very helpful.


The Google Maps API is a little difficult in that


1: there aren't singular x and y values that can be set. You need to go through the setPosition() method

2: the setPosition() method doesn't take regular x, y coordinates like setPosition(x,y). Nor does it take a generic point object like setPosition({x:100, y:200}). You need pass in an object that  new google.maps.LatLng() returns.


To get around these pitfalls I animated a proxyCoordinates object with x and y values and used an onUpdate callback to pass those values into the setPosition like:



var proxyCoordinates = {

function applyCoordinates(){
  marker.setPosition(new google.maps.LatLng(proxyCoordinates.x, proxyCoordinates.y));

function move_tweenMax() {
 if (isMapReady)


  • Like 1
Link to comment
Share on other sites

  • 6 months later...

I stumbled across this when looking at how to animate markers on a Google Map (API v3). 


I got access to the DOM element using the answer provided here http://stackoverflow.com/questions/2065485/get-dom-element-of-a-marker-in-google-maps-api-3


You also need to set 'optimised: false' on the marker so that it appears on it's own layer as an image (Google tries to render on Canvas where possible). Be aware, this could have performance considerations if you are using a lot of markers.


Then selecting it's parent, and using that as the object to perform TweenMax animations on.


This in the midst of a React project and so it is a bit more involved than that. But thought these concepts would help anyone trying to do the same thing.

  • 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...