How set Custom Annotation markers ( animated rings around a point) on GMSMapView

Question

Using Google maps iOS SDK I have implemented a mapView in that i have created markers as follows

// Creates a marker in the center of the map.
GMSMarker *marker = [[GMSMarker alloc] init];
marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
marker.title = @"Sydney";
marker.snippet = @"Australia";

marker.icon = [UIImage imageNamed:@"point1.png"]; 

marker.map = mapView_;

But i need to Display animated images ie some sequence of images to display, animated rings around a point, instead of original GMSMarker

sequence of images are point1.png point2.png point3.png point4.png point5.png

Can any one help me to achieve this

Solution 1

in

- (RMMapLayer *)mapView:(RMMapView *)mpView layerForAnnotation:(RMAnnotation *)annotation
{

  UIImageView *pulseRingImg = [[UIImageView alloc] initWithFrame: CGRectMake(-30, -30, 78, 78)];
    pulseRingImg.image = [UIImage imageNamed:@"PulseRing.png"];
     pulseRingImg.userInteractionEnabled = NO;

    CABasicAnimation *theAnimation;
    theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
    theAnimation.duration=2.0;
    theAnimation.repeatCount=HUGE_VALF;
    theAnimation.autoreverses=NO;
    pulseRingImg.alpha=0;
    theAnimation.fromValue=[NSNumber numberWithFloat:0.0];
    theAnimation.toValue=[NSNumber numberWithFloat:1.0];
    pulseRingImg.alpha = 1;
    [pulseRingImg.layer addAnimation:theAnimation forKey:@"pulse"]; 
     pulseRingImg.userInteractionEnabled = NO;

    [mapView addSubview:pulseRingImg];
    [marker addSublayer:pulseRingImg.layer];

 return marker;

}

PulseRing.png in [UIImage imageNamed:@"PulseRing.png"] is

Getting reference from:

ios - how to do a native "Pulse effect" animation on a UIButton

CABasicAnimation *theAnimation;

theAnimation=[CABasicAnimation animationWithKeyPath:@"opacity"];
theAnimation.duration=1.0;
theAnimation.repeatCount=HUGE_VALF;
theAnimation.autoreverses=YES;
theAnimation.fromValue=[NSNumber numberWithFloat:1.0];
theAnimation.toValue=[NSNumber numberWithFloat:0.0];
[myButton.layer addAnimation:theAnimation forKey:@"animateOpacity"]; 

Solution 2

From the google map sdk / it appears at this moment v1.9 the only supported animations in using framed based images. If you're using mapkit - > you can simply use https://github.com/TransitApp/SVPulsingAnnotationView

From google's sdk -> ios sample

AnimatedCurrentLocationViewController.m

            NSMutableArray *frames = [NSMutableArray array];
            for (int i =0; i<146; i++) {
                NSString *img = [NSString stringWithFormat:@"pulse-%d",i];
                [frames addObject:[UIImage imageNamed:img]];
            }
           marker.icon = [UIImage animatedImageWithImages:frames duration:3];

On my branch of FlipBook https://github.com/johndpope/Flipbook I've rendered out the pulse animations in retina to a bunch of transparent png images. It maybe possible to further reduce these file sizes in photoshop. Granted this is not ideal and will cause your binary file size to be bloated but is passable.

Solution 3

Have you tried this? https://github.com/shu223/Pulsator

Initiate and add to your view's layer, then call start!

let pulsator = Pulsator()
view.layer.addSublayer(pulsator)
pulsator.start()

Comments

[user2732294]

But i need to add animated images ie some sequence of images to diplay animated rings around a point. it it possible,

[BalaChandra]

then create a gif using those series of images you want to display and set that as marker icon

[user2732294]

even we set gif images it just display a single image

[user2732294]

No not yet still browsing

[Luke Irvin]

How can an additional pulse image be added? For example: I have mine on an infinite repeat, but before the ring ends/repeats I want the next to start. This way the user will see two rings.

[Hemant Singh Rathore]

What is RMMapLayer, i am not able to see it in google maps framework.

[johndpope]

This answer is specific to mapbox - not Google ios sdk mapbox.com/mapbox-ios-sdk