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

Answer 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"]; 

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