Animate marker in Google Maps SDK in iOS

Question

I have an image over a map and I want to give it some linear and rotational motion over the google maps.

How can I do it in GMS? Please help me.

http://stackoverflow.com/questions/40543095/bounce-animation-on-google-map-marker-in-ios-objective-c/41764821#41764821 animate google marker in iOS — Dhiru, Jan 23 '17 at 06:11

kmdupr33 · Answer 1 · 2014-03-19T17:14:50.737

2

You could add the image as a marker and then use the layer property of that marker to add some animations using CoreAnimation

See the docs: developers.google.com/maps/documentation/ios/reference/

edited Mar 19 '14 at 17:14

answered Mar 19 '14 at 16:16

kmdupr33

620
6
14

I'm aware of that. There's a layer property on GMSMarker that allows you animate it. I just animated a marker using it. See the docs: https://developers.google.com/maps/documentation/ios/reference/interface_g_m_s_map_layer – kmdupr33 Mar 19 '14 at 17:01
SORRY! wasnt aware they added that -- we are still on a very old version – Daij-Djan Mar 19 '14 at 17:04

score 0 · Answer 2 · answered Mar 20 '14 at 10:02

0

Actually I solved the problem by using following code and GMSMarker method setPosition: . The following code provides rotation to the images and using setPosition: we can place the marker/image anywhere. The combination of both gives required linear and rotational motion.

- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees image: (UIImage*) image
{
    CGSize size = image.size;;

    UIGraphicsBeginImageContext(size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextTranslateCTM( context, 0.5f * size.width, 0.5f * size.height ) ;
    CGContextRotateCTM (context, DegreesToRadians(degrees));

    [ image drawInRect:(CGRect){ { -size.width * 0.5f, -size.height * 0.5f }, size } ] ;
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

answered Mar 20 '14 at 10:02

khushalbokadey

1,132
1
11
25

I tried your code but my marker icon seems shrinked. Do you have any idea how to fix this ? – Rahul Vyas Oct 12 '16 at 07:08
@RahulVyas That could be the case if your image is not square. Try changing `0.5` multiplier. – khushalbokadey Oct 12 '16 at 07:15
Tried another thing that worked. Do you know how we can smoothly rotate the car in moving direction like uber does ? I am updating heading values on my server. – Rahul Vyas Oct 12 '16 at 12:38
@RahulVyas You will have to use web sockets for location of cars. Basically what you need is a persistent connection between the server and the app. – khushalbokadey Oct 13 '16 at 10:09

score 0 · Answer 3 · answered Jul 06 '17 at 12:16

It's an easy process. First rotate the marker to get the right heading using this function:

+(float)getBearing:(CLLocationCoordinate2D)locations1 andSecond:(CLLocationCoordinate2D)locattion2{
    float fLat = degreesToRadians(locations1.latitude);
    float fLng = degreesToRadians(locations1.longitude);
    float tLat = degreesToRadians(locattion2.latitude);
    float tLng = degreesToRadians(locattion2.longitude);

    float degree = radiansToDegrees(atan2(sin(tLng-fLng)*cos(tLat), cos(fLat)*sin(tLat)-sin(fLat)*cos(tLat)*cos(tLng-fLng)));

    if (degree >= 0) {
        return degree;
    } else {
        return 360+degree;
    }
}

Then rotate your marker to the new heading:

YOUR_MARKER.rotation = CALCULATED_HEADING - 180;

Now, the final step is to animate your driver smoothly

[CATransaction begin];
[CATransaction setAnimationDuration:3.1];
[YOUR_MARKER setPosition:NEW_LOCATION_COORDINATES];
[CATransaction commit];

Animate marker in Google Maps SDK in iOS

3 Answers3