CODEWITHSUNDEEP
xcodeswiftgoogle-mapscllocationmarkers
Yaroslav Dukal
Yaroslav Dukal

Reputation: 3942

Pulsating marker animation in Google Maps Swift

I am using GMaps SDK for Swift and my goal is to replace standard marker with animated type like pulsating effect. I tried to play with layer but no luck. Any suggestions how can I add animation effects on my marker image? 

let parkingSpotsPosition = CLLocationCoordinate2D(latitude: self.SpotLocationLatitudes.last!, longitude: self.SpotLocationLongitudes.last!)
                    let marker = GMSMarker(position: parkingSpotsPosition)
                    marker.title = self.SpotNames.last
                    //marker.icon = GMSMarker.markerImageWithColor(UIColor.greenColor())
                     marker.icon = UIImage(named: "parking-location")
                     marker.map = self.gMapsView

Upvotes: 1

Views: 2675

Answers (1)

Lawrence MacFadyen
Lawrence MacFadyen

Reputation: 71

You can do it by drawing the image in its states. For example, an alarm pulsating image I draw with one line lit, two lines lit, etc. Then you animate those images.

Define the animatedImage, individual images, and an array of the images like so:

var animatedImage: UIImage!
var image1: UIImage!
var image2: UIImage!
var image3: UIImage!
var image4: UIImage!
var images: [UIImage]!

Somewhere like viewDidLoad, set it up with a duration of your choosing. I use Sketch App for drawing the individual images.

image1 = UIImage(named: "MarkerTrouble1.png")
image2 = UIImage(named: "MarkerTrouble2.png")
image3 = UIImage(named: "MarkerTrouble3.png")
image4 = UIImage(named: "MarkerTrouble4.png")

images = [image1, image2, image3, image4]

animatedImage = UIImage.animatedImage(with: images, duration: 0.8)

When you want to draw the animated image on the map and see the pulsating effect, then use the usual GMSMapView and GMSMarker code, something like:

let marker = GMSMarker()
let markerView = UIImageView(image: animatedImage)
marker.position = CLLocationCoordinate2D(latitude: userLat, longitude: userLng)
marker.iconView = markerView
marker.map = mapView

Upvotes: 1

Related Questions