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

score 3 · Accepted Answer · edited May 23 '17 at 12:26

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

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. — Luke Irvin, Nov 11 '13 at 20:27
What is `RMMapLayer`, i am not able to see it in google maps framework. — Hemant Singh Rathore, Jan 30 '14 at 11:15
This answer is specific to mapbox - not Google ios sdk https://www.mapbox.com/mapbox-ios-sdk/ — johndpope, Apr 28 '15 at 06:38

johndpope · Answer 2 · 2015-04-28T07:34:22.277

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.

score 2 · Answer 3 · answered May 24 '16 at 17:14

2

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

answered May 24 '16 at 17:14

Yaroslav Dukal

3,894
29
36

score 0 · Answer 4 · answered Apr 25 '17 at 20:40

For SWIFT 3:

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

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]

Set your marker´s icon:

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

You can change the duration of the animation
Run your app, you will see the marker animated with the different images

score -1 · Answer 5 · answered Aug 30 '13 at 09:50

-1

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

answered Aug 30 '13 at 09:50

BalaChandra

632
9
33

But i need to add animated images ie some sequence of images to diplay animated rings around a point. it it possible, – user2732294 Aug 30 '13 at 10:04
then create a gif using those series of images you want to display and set that as marker icon – BalaChandra Aug 30 '13 at 10:40
even we set gif images it just display a single image – user2732294 Aug 30 '13 at 11:39
No not yet still browsing – user2732294 Sep 02 '13 at 06:57

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

5 Answers5

Linked