Create custom marker and custom info window in iOS using swift - Google maps

In this article, we are going to learn about Custom Marker and Custom Info Window in Google maps.

First, create a new Xcode project and name it as Custom Marker.

In this example we are going to use completely auto layouts without a storyboard, every constraint is programmatically.

Download the sample project from the bottom of this tutorial.

Adding Google Map:

The first thing to do is integrate Google Maps SDK either using pod or other alternatives.

Here I am integrating using cocoapods.

Open terminal, go the project folder then type follow commands.

pod init

open -a xcode podfile

Then add pod 'GoogleMaps' below to the # Pods for CustomMarker.

pod install

After successful installation close the project and open workspace file.

To use google maps we need a key from google.

If you don't have one, get one from here

Okay, All set.

open AppDelegate.swift and import GoogleMaps then add the following line inside didFinishLaunchingWithOptions method:

GMSServices.provideAPIKey("YOUR API KEY")

open ViewController.swift and import GoogleMaps.

Add the following closure before viewDidLoad():

var mapView: GMSMapView = {
     let v = GMSMapView()
     v.translatesAutoresizingMaskIntoConstraints = false
     return v
 }()

Add mapView to the view as subview, add the following code inside viewDidLoad():

self.view.addSubview(mapView)
mapView.padding = UIEdgeInsets(top: 72, left: 25, bottom: 0, right: 25)
mapView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
mapView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
mapView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
mapView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
mapView.delegate = self

Don't panic with error, simply add the following extension to remove the error, we will discuss later in this example.

extension ViewController: GMSMapViewDelegate {
 
}

Now run the app, if your API key is valid you will see the map like below

Add Custom Marker:

Before creating a custom marker, first create our model, add the following model:

struct SSPlace {
    var name: String?
    var address: String?
    var coordinates: (lat: Double, lng: Double)?
}

Create array of SSPlaces as follow:

var places = [SSPlace]()

Add some sample data to places array, add the following code to the end of viewDidLoad():

places.append(SSPlace(name: "Fremont Troll", address: "N 36th St, Seattle, WA 98103, United States", coordinates: (lat: 47.651105, lng: -122.347347)))
places.append(SSPlace(name: "Grand Canyon National Park", address: "Arizona, United States", coordinates: (lat: 36.099982, lng: -112.123640)))
places.append(SSPlace(name: "Statue of Liberty National Monument", address: "New York, NY 10004, United States", coordinates: (lat: 40.689323, lng: -74.044490)))
places.append(SSPlace(name: "Yellowstone National Park", address: "United States", coordinates: (lat: 44.429311, lng: -110.588112)))
places.append(SSPlace(name: "Walt Disney World Resort", address: "Orlando, FL, United States", coordinates: (lat: 28.385280, lng: -81.563853)))

Now it's time to create a custom marker view.

Create a new swift file of type UIView and name it as CustomMarkerView. Replace the whole class with the following code:

class CustomMarkerView: UIView {
    
    var imageName: String?
    var borderColor: UIColor!
    
    init(frame: CGRect, imageName: String?, borderColor: UIColor, tag: Int) {
        super.init(frame: frame)
        self.imageName=imageName
        self.borderColor=borderColor
        self.tag = tag
        setupViews()
    }
    
    func setupViews() {
        let imgView = UIImageView()
        imgView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(imgView)
        imgView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        imgView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        imgView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        imgView.heightAnchor.constraint(equalToConstant: 50).isActive = true
        imgView.layer.cornerRadius = 25
        imgView.layer.borderColor = borderColor?.cgColor
        imgView.contentMode = .scaleAspectFill
        imgView.layer.borderWidth = 4
        imgView.clipsToBounds = true
        imgView.image = UIImage(named: imageName!)
        
        let triangleImgView = UIImageView()
        self.insertSubview(triangleImgView, belowSubview: imgView)
        triangleImgView.translatesAutoresizingMaskIntoConstraints = false
        triangleImgView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        triangleImgView.topAnchor.constraint(equalTo: imgView.bottomAnchor, constant: -6).isActive = true
        triangleImgView.widthAnchor.constraint(equalToConstant: 23/2).isActive = true
        triangleImgView.heightAnchor.constraint(equalToConstant: 24/2).isActive = true
        triangleImgView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        triangleImgView.image = UIImage(named: "markerTriangle")
        triangleImgView.tintColor = borderColor
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

Here we are adding UIImageView to show the place image and one more UIImageView to show the bottom triangle.

Create new array to store all markers:

var markers = [GMSMarker]()

To add the places as markers on the map add the following method:

func addMarkers() {
    markers.removeAll()
    for (index, place) in places.enumerated() {
        let marker = GMSMarker()
        let customMarker = CustomMarkerView(frame: CGRect(x: 0, y: 0, width: customMarkerWidth, height: customMarkerHeight), imageName: place.name, borderColor: primaryColor, tag: index)
        marker.iconView = customMarker
        marker.position = CLLocationCoordinate2D(latitude: place.coordinates!.lat, longitude: place.coordinates!.lng)
        marker.infoWindowAnchor = CGPoint(x: 0.5, y: 0)
        marker.map = self.mapView
        marker.zIndex = Int32(index)
        marker.userData = place
        markers.append(marker)
    }
}

Add the following colors before ViewController class:

let primaryColor = UIColor(red:0.00, green:0.19, blue:0.56, alpha:1.0)

let secondaryColor = UIColor(red:0.89, green:0.15, blue:0.21, alpha:1.0)

After adding markers to the map let focus them so that users can look at those places only.

To focus the markers add the following methods:

func focusMapToShowAllMarkers() {
    if let firstLocation = markers.first?.position {
        var bounds =  GMSCoordinateBounds(coordinate: firstLocation, coordinate: firstLocation)
        
        for marker in markers {
            bounds = bounds.includingCoordinate(marker.position)
        }
        let update = GMSCameraUpdate.fit(bounds, withPadding: 20)
        self.mapView.animate(with: update)
    }
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    self.focusMapToShowAllMarkers()
}

Finally call the addMarkers() function at the end of viewDidLoad():

override func viewDidLoad() {
       super.viewDidLoad()
       /***
       self.addMarkers()
}

That's it run the app, you can see markers as follows:

Add Custom Info Window:

Create a new swift file of type UIView and name it as CustomMarkerInfoWindow. Replace the whole class with the following code:

class CustomMarkerInfoWindow: UIView {
    
    var txtLabel: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()
    
    var subtitleLabel: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()
    
    var chevronButton: UIButton = {
        let v = UIButton()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()
    
    var imgView: UIImageView = {
        let v = UIImageView()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = primaryColor
        self.addSubview(imgView)
        imgView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        imgView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        imgView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        imgView.widthAnchor.constraint(equalTo: imgView.heightAnchor, multiplier: 1).isActive = true
        imgView.heightAnchor.constraint(equalToConstant: 60).isActive = true
        imgView.clipsToBounds = true
        imgView.contentMode = .scaleAspectFill
        imgView.layer.cornerRadius = 5
        imgView.layer.masksToBounds = true
        imgView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner]
        
        self.addSubview(chevronButton)
        chevronButton.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        chevronButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8).isActive = true
        chevronButton.widthAnchor.constraint(equalToConstant: 16).isActive = true
        chevronButton.heightAnchor.constraint(equalToConstant: 16).isActive = true
        chevronButton.setImage(UIImage(named: "chevron"), for: .normal)
        chevronButton.tintColor = UIColor.white
        chevronButton.isUserInteractionEnabled = false
        
        self.addSubview(txtLabel)
        txtLabel.topAnchor.constraint(greaterThanOrEqualTo: topAnchor, constant: 4).isActive = true
        txtLabel.leadingAnchor.constraint(equalTo: imgView.trailingAnchor, constant: 8).isActive = true
        txtLabel.trailingAnchor.constraint(equalTo: chevronButton.leadingAnchor, constant: -8).isActive = true
        txtLabel.bottomAnchor.constraint(greaterThanOrEqualTo: centerYAnchor, constant: 2).isActive = true
        txtLabel.font = UIFont.boldSystemFont(ofSize: 16)
        txtLabel.numberOfLines = 2
        txtLabel.textColor = UIColor.white
        txtLabel.text = "dfsdfd"
        
        self.addSubview(subtitleLabel)
        subtitleLabel.topAnchor.constraint(equalTo: txtLabel.bottomAnchor, constant: 0).isActive = true
        subtitleLabel.leadingAnchor.constraint(equalTo: txtLabel.leadingAnchor).isActive = true
        subtitleLabel.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        subtitleLabel.font = UIFont.systemFont(ofSize: 14, weight: .light)
        subtitleLabel.textColor = UIColor.white
        subtitleLabel.text = "55656556"
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        layer.masksToBounds = true
        layer.cornerRadius = 5
    }   
}

Code looks big but that's a simple auto layout.

Okay, now whenever user taps on the marker we need to change the border color to red and show info window.

First to change the selected marker color to red add the following delegate method to the extension:

func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
    guard let customMarkerView = marker.iconView as? CustomMarkerView else { return false }
    let imgName = customMarkerView.imageName
    let customMarker = CustomMarkerView(frame: CGRect(x: 0, y: 0, width: customMarkerWidth, height: customMarkerHeight), imageName: imgName, borderColor: secondaryColor, tag: customMarkerView.tag)
    marker.iconView = customMarker
    return false
}

Then to show the Marker info window add the following delegate method:

func mapView(_ mapView: GMSMapView, markerInfoWindow marker: GMSMarker) -> UIView? {
     if let place = marker.userData as? SSPlace {
         marker.tracksInfoWindowChanges = true
         let infoWindow = CustomMarkerInfoWindow()
         infoWindow.tag = 5555
         let height: CGFloat = 65
         let paddingWith = height + 16 + 32
         infoWindow.frame = CGRect(x: 0, y: 0, width: getEstimatedWidthForMarker(place, padding: paddingWith) + paddingWith, height: height)
         infoWindow.imgView.image = UIImage(named: place.name!)
         infoWindow.txtLabel.text = place.name
         infoWindow.subtitleLabel.text = place.address
         return infoWindow
     }
     return nil
 }
 
 func getEstimatedWidthForMarker(_ place: SSPlace, padding: CGFloat) -> CGFloat {
     var estimatedWidth: CGFloat = 0
     let infoWindow = CustomMarkerInfoWindow()
     let maxWidth = (UIDevice.current.userInterfaceIdiom == .pad ? UIScreen.main.bounds.width * 0.7 : UIScreen.main.bounds.width * 0.8) - padding
     let titleWidth = (place.name ?? "").width(withConstrainedHeight: infoWindow.txtLabel.frame.height, font: infoWindow.txtLabel.font)
     let subtitleWidth = (place.address ?? "").width(withConstrainedHeight: infoWindow.subtitleLabel.frame.height, font: infoWindow.subtitleLabel.font)
     estimatedWidth = min(maxWidth, max(titleWidth, subtitleWidth))
     return estimatedWidth
 }
 
 extension String {
     func width(withConstrainedHeight height: CGFloat, font: UIFont) -> CGFloat {
         let constraintRect = CGSize(width: .greatestFiniteMagnitude, height: height)
         let boundingBox = self.boundingRect(with: constraintRect, options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font: font], context: nil)
         
         return ceil(boundingBox.width)
     }
 }

The getEstimatedWidthForMarker method is to calculate the window size based on the content.

Next after closing the info window you should change marker color is default blue, for that add the following delegate method:

func mapView(_ mapView: GMSMapView, didCloseInfoWindowOf marker: GMSMarker) {
    guard let customMarkerView = marker.iconView as? CustomMarkerView else { return }
    let imgName = customMarkerView.imageName
    let customMarker = CustomMarkerView(frame: CGRect(x: 0, y: 0, width: customMarkerWidth, height: customMarkerHeight), imageName: imgName, borderColor: primaryColor, tag: customMarkerView.tag)
    marker.iconView = customMarker
}

That's it all done, run the code you will see a map with markers then tap any one of the markers you will see the info window opened with marker color changed.

This tutorial looks long, but you can directly download code or check in the Github.