Google map Marker moving along path?

[thipages]

Hi,

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, {
     bezier:{
           type:"soft",
           values:????
     },
     ease:Linear.easeNone}
);

[Jonathan]

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!

[thipages]

Hi,

Thanks for your words. I wrote a sample code with CodePen

 

I simplify the original question trying to go to the root of the problem  : how to animate a Google Marker along a line with TweenMax

 

Here is the code : 

See the Pen KgKLzx by thipages (@thipages) on CodePen

 

 

Thnaks for your help

[Carl]

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 = {
  x:2.86085,
  y:101.6437
}


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


function move_tweenMax() {
 console.log("move")
 if (isMapReady)
    TweenMax.to(
      proxyCoordinates,2,
      {
        x:2.915067,
        y:101.6079,
        onUpdate:applyCoordinates
      }
    );
  
}

https://codepen.io/GreenSock/pen/EgaxGo?editors=0010

[thipages]

Hi,

Yep! Working better than mine....

 

 

ok, thats very clear. I can move on with the Bezier Curve

Thank you very for prompt answer.

 

Thierry

[Carl]

Glad it helped. Happy Tweening!

[Jonathan]

Great solution Carl

[unseenstudio]

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.

[thipages]

Hi,

I am not sure I understand the question , if any.