iOS Google Maps Marker Animation

This post illustrates an easy solution for implementing marker animation on Google Maps for iOS with Swift.

The case I’ve used this for is to add a pulsating alarm signal on a google map location, representing someone in trouble. The solution is a combination of using image animation, and applying the result to a GMSMarker. The technique for animating the sequence of images is something that was illustrated here on CodePath.

I’m going to assume you have a project setup already with Google Maps integrated per the usual Google Maps SDK For iOS instructions.

In your UIViewController class where you have your GMSMapView, define the variables below. You’ll need an IBOutlet defined for your GMSMapView, so I’m showing that as well.

Next, in your viewDidLoad, perform the following setup.

In my case, the four MarkerTrouble*.png files represent the states of the animation I want to see on the map. In my case, that was a pulsating alarm style signal, where MarkerTrouble1.png has only the central figure and no lines colored, MarkerTrouble2.png has one line colored, and so on. When it is animated, it is a very nice alarm signal representation.

I do all my drawing using the awesome Sketch App, and things like this are very quick and easy to do once you are familiar with Sketch.

Here is what my image1 to image4 actually look like. They are exported without a background, so I can put them on whatever background color I want.

With the setup in place, now it is a case of applying the animatedImage to the GMSMarker. With the GMSMapView IBOutlet defined above in your controller, you can write the following code in whatever method you want to trigger the animated marker on your google map.

If you run your app with the setup above, here is what you would see on the map, using the images above to represent someone in trouble at a certain location.

This has been a quick tutorial, but hopefully if you’ve stumbled across it, you can try it out and soon have animated markers in your iOS app Google Maps.

Feedback is always appreciated, so if you’ve accomplished something similar with another technique, or have suggestions, please leave a comment!

Leave a Comment: