Jump to content
Search Community

Google map Marker moving along path?

thipages
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

Posted

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

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

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

  • Solution
Posted

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
Posted

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
  • 6 months later...
unseenstudio
Posted

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
Posted

Hi,

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

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