3

custom Marker with user profile pics

I want to show user's profile picture in my custom marker for google maps. Like all others, I have tried this code in init: of customMarker

self.location = location
position = location
icon = UIImage(named: "live location")
groundAnchor = CGPoint(x: 0.5, y: 1)

Is there any possible way to show another image in the circle of the marker icon. ex. using xib.

1
  • You can do this by making a custom class of UIView.
    – TheTiger
    Jan 16, 2019 at 6:27

3 Answers 3

3

You can use given two methods:

func drawImageWithProfilePic(pp: UIImage, image: UIImage) -> UIImage {

    let imgView = UIImageView(image: image)
    let picImgView = UIImageView(image: pp)
    picImgView.frame = CGRect(x: 0, y: 0, width: 30, height: 30)

    imgView.addSubview(picImgView)
    picImgView.center.x = imgView.center.x
    picImgView.center.y = imgView.center.y - 7
    picImgView.layer.cornerRadius = picImgView.frame.width/2
    picImgView.clipsToBounds = true
    imgView.setNeedsLayout()
    picImgView.setNeedsLayout()

    let newImage = imageWithView(view: imgView)
    return newImage
}

func imageWithView(view: UIView) -> UIImage {
    var image: UIImage?
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0.0)
    if let context = UIGraphicsGetCurrentContext() {
        view.layer.render(in: context)
        image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
    return image ?? UIImage()
}

Here pp is your profile pic and image is the pic icon. You can set the frame of Profile pic according to you. I have tried this:

Edit

let marker = GMSMarker(position: coordinate)
marker.icon = drawImageWithProfilePic(pp: imgPP, image: img)
marker.appearAnimation = GMSMarkerAnimation.pop
marker.map = viewGoogleMap

and here is the output:

enter image description here

2
  • Where do u want me to use view.addSubview(imageView) because GMSMarker is not allowing to use addSubview Jan 18, 2019 at 4:22
  • drawImageWithProfilePic(pp: #imageLiteral(resourceName: "no_pic"), image: #imageLiteral(resourceName: "pin_short")) will return an image. You just need to set it on your marker's icon. Jan 18, 2019 at 6:41
2
    //put this code where you get image

     let url = URL(string: "your_imageUrlString")
     let data = try? Data(contentsOf: url!)

      let marker = GMSMarker()
       marker.position = CLLocationCoordinate2D(latitude: Double(lat)!, longitude:  Double(long)!)
   marker.icon = self.drawImageWithProfilePic(pp: UIImage.init(data:data!)!, image: UIImage.init(named: "red")!)
       marker.title = location
          marker.snippet = name + " " + mobile
    marker.appearAnimation = GMSMarkerAnimation.pop
                                marker.map = self.mapView


//put this code in your viewController class 
 func drawImageWithProfilePic(pp: UIImage, image: UIImage) -> UIImage {

        let imgView = UIImageView(image: image)
         imgView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)

        let picImgView = UIImageView(image: pp)
        picImgView.frame = CGRect(x: 0, y: 0, width: 40, height: 40)

        imgView.addSubview(picImgView)
        picImgView.center.x = imgView.center.x
        picImgView.center.y = imgView.center.y - 7
        picImgView.layer.cornerRadius = picImgView.frame.width/2
        picImgView.clipsToBounds = true
        imgView.setNeedsLayout()
        picImgView.setNeedsLayout()

        let newImage = imageWithView(view: imgView)
        return newImage
    }

    func imageWithView(view: UIView) -> UIImage {
        var image: UIImage?
        UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0.0)
        if let context = UIGraphicsGetCurrentContext() {
            view.layer.render(in: context)
            image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
        }
        return image ?? UIImage()
    }



//here "red" is dummy background image 
0

You can create/design a custom view either in nib or programmatically and then assign it to your marker like this.

let someView = YourCustomView()
someView.markerImageView.image = UIImage(named: "markerImage")
someView.userImageView.image = UIImage(named: "userImage")

let marker = GMSMarker()
marker.map = yourMapView
marker.position = somePositionCoordinate;
marker.iconView = someView
1
  • There is no property customView for GMSMarker, we only have iconView. Using iconView is not helping. Jan 18, 2019 at 3:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.