Google Maps Marker Icon as a Circular Picture With Border

Question

What I am trying to do is set a google map marker as ONLY a UIImage I am downloading from firebase. Currently here is my code:

 if let downloadedImage = UIImage(data: data!) {

    let markerImageView: UIImageView? = nil

    markerImageView?.image = downloadedImage
    print(markerImageView?.image)
    markerImageView?.frame = CGRect(x: 0, y: 0, width: 50, height: 50)

    markerImageView?.layer.borderWidth = 1.0
    markerImageView?.layer.masksToBounds = false
    markerImageView?.layer.borderColor = UIColor.white.cgColor
    markerImageView?.layer.cornerRadius = (markerImageView?.frame.size.width)! / 2
    markerImageView?.clipsToBounds = true

    let actualFinalImage = markerImageView?.image

    marker.icon = actualFinalImage

}

I know that I am getting an image from firebase and that part is working. However, where I think the problem is with this part: let markerImageView: UIImageView? = nil I think setting it as nil conflicts with the marker icon and that's why this does not work. However, if I take out the nil part, I get an error saying that I can't edit markerImageView before it has been initialized.

Any help would be appreciated!

score 1 · Answer 1 · answered Mar 30 '20 at 07:21

easier. i make an UIImage Extension that convert any image to circle. than just put call the function.

extension UIImage {
    func circularImage(_ radius: CGFloat) -> UIImage? {
        var imageView = UIImageView()
        if self.size.width > self.size.height {
            imageView.frame =  CGRect(x: 0, y: 0, width: self.size.width, height: self.size.width)
            imageView.image = self
            imageView.contentMode = .scaleAspectFit
        } else { imageView = UIImageView(image: self) }
        var layer: CALayer = CALayer()

        layer = imageView.layer
        layer.masksToBounds = true
        layer.cornerRadius = radius
        UIGraphicsBeginImageContext(imageView.bounds.size)
        layer.render(in: UIGraphicsGetCurrentContext()!)
        let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return roundedImage
    }
}

so when you declare gmsmarker just do it like this

func downloadGMSMarkerImage(url: URL,marker : GMSMarker) {
    print("Download Started")
    getDataFromUrl(url: url) { data, response, error in
        guard let data = data, error == nil else { return }
        print(response?.suggestedFilename ?? url.lastPathComponent)
        print("Download Finished")
        DispatchQueue.main.async() {
            let pinImage = UIImage(data: data)
            let size = CGSize(width: 44, height: 44)
            UIGraphicsBeginImageContext(size)
            pinImage!.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
            let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
            marker.icon = resizedImage?.circularImage(22)//call function if want the image cirle

        }
    }
}

and you will get result like so

score 0 · Answer 2 · edited May 23 '17 at 12:02

Try following the guide - Use the marker's icon property

The following snippet creates a marker with a custom icon provided as a UIImage in the icon property. The icon is centered at London, England. The snippet assumes that your application contains an image named "house.png".

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView

For a more complete implementation of custom marker image:

mapView.delegate = self

let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
let markerView = UIImageView(image: house)
markerView.tintColor = .red
londonView = markerView

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let marker = GMSMarker(position: position)
marker.title = "London"
marker.iconView = markerView
marker.tracksViewChanges = true
marker.map = mapView
london = marker

In a related SO post:

let marker = GMSMarker()

// I have taken a pin image which is a custom image
let markerImage = UIImage(named: "mapMarker")!.withRenderingMode(.alwaysTemplate)

//creating a marker view
let markerView = UIImageView(image: markerImage)

//changing the tint color of the image
markerView.tintColor = UIColor.red

marker.position = CLLocationCoordinate2D(latitude: 28.7041, longitude: 77.1025)

marker.iconView = markerView
marker.title = "New Delhi"
marker.snippet = "India"
marker.map = mapView

//comment this line if you don't wish to put a callout bubble
mapView.selectedMarker = marker

You'll see how he assign markerImage for the UIImage to get the image, the markerview to set the image for UIImageView. Lastly, calling the markerView as marker.iconView value.

Hope this helps.

Google Maps Marker Icon as a Circular Picture With Border

2 Answers2