Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
thipages

Google map Marker moving along path?

Recommended Posts

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}
);
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

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Glad it helped. Happy Tweening!

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

Hi,

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

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