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.

Answer 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()

Answer 4

For SWIFT 3:

You can use UIImage.animatedImage for your marker´s icon, like this:

1. Create an array of UIImage with the different images

   let image1 = UIImage(named: "marker-image-1")
   let image2 = UIImage(named: "marker-image-2")
   let image3 = UIImage(named: "marker-image-3")
   
   let imagesArray = [image1,image2,image3]
   

2. Set your marker´s icon:

   marker.icon = UIImage.animatedImage(with: imagesArray as! [UIImage], duration: 1.2)
   marker.map = mapView
   

3. You can change the duration of the animation

4. Run your app, you will see the marker animated with the different images

Answer 5

You can customize your marker by changing the marker icon property.

eg: london.icon = [UIImage imageNamed:@"house"]; you can give your own image or some edited image there.

if you want to customize the infowindow that will be displayed after you clicked on a marker.

refer that link

https://developers.google.com/live/shows/864758637