Animate map marker when selected on Google Maps in Swift iOS

Question

I am building a project with Google maps and trying to animate map marker when it is selected (to look like on attached images).

It looks more like transfering map marker into infoWindow, is that possible somehow? I know that there is a iconView property on GMSMarker , which is a UIView possible to animate, but I am afraid that calling other actions from marker itself may be problematic.

Should I present infoWindow for that marker which will cover marker itself and then animate infoWindow or is there any other solution?

Answer 1

I did a similar animation using MapKit. On GoogleMaps SDK since version 1.13 if I'm not wrong you can have a similar approach as MapKit.

You have a property named iconView and you have (almost) same capabilities as UIView.

The iconView property supports animation of all animatable properties of UIView except frame and center .

Due to this limitation, I had to make a trick with the animated view inside the iconView. Also, to center the beginning of your animated view, you must have the iconView in double size, so if you have too many markers it can be a big problem.

I did a sample code by curiosity about your question.

In the code below, you can customize markerView function to have buttons, icons and all you need on your marker view.

import UIKit
import GoogleMaps

class MapViewController: UIViewController {


    override func viewDidLoad() {
        super.viewDidLoad()

        // Create a GMSCameraPosition that tells the map to display the
        // coordinate -33.86,151.20 at zoom level 6.
        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
        let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
        mapView.camera = camera
        mapView.delegate = self
        self.view = mapView
        // Creates a marker in the center of the map.
        let marker = GMSMarker()
        marker.iconView = markerView()
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView
        // Do any additional setup after loading the view.
    }

    func markerView() -> UIView {
        let backView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 30))

        let markerView = UIView(frame: CGRect(x: 85, y: 0, width: 30, height: 30))
        let labelName = UILabel(frame: CGRect(x: 30, y: 0, width: 70, height: 30))
        markerView.clipsToBounds = true
        labelName.text = "Yyaaaa"
        labelName.textColor = .white
        markerView.addSubview(labelName)
        markerView.backgroundColor = .blue
        markerView.layer.cornerRadius = 15
        markerView.tag = 1
        backView.addSubview(markerView)
        return backView
    }
}

extension MapViewController: GMSMapViewDelegate {
    func mapView(_ mapView: GMSMapView, markerInfoWindow marker: GMSMarker) -> UIView? {
        let backView = marker.iconView
        if let subViews = backView?.subviews {
            for view in subViews {
                if view.tag == 1 {
                    UIView.animate(withDuration: 0.5, animations: {
                      view.frame = CGRect(x: 85, y: 0, width: 115, height: 30)
                    })
                }
            }
        }
        return nil
    }
}