I want to create this customMarkerView(The view with hotel sahara star & Marine Drive) on GoogleMap
, and should be able to see both the views on map without clicking on it.
swift4
would be recommended.
Just like uber
,
check the reference image.
I want to create this customMarkerView(The view with hotel sahara star & Marine Drive) on GoogleMap
, and should be able to see both the views on map without clicking on it.
swift4
would be recommended.
Just like uber
,
check the reference image.
You can add two MarkerViews
in map using GMSMarker()
Put them in an array
And then you can use GMSCoordinateBounds
to focus map to show all markers.
The code below shows how to focus the map.
var bounds = GMSCoordinateBounds()
for marker in yourArrayOfMarkers
{
bounds = bounds.includingCoordinate(marker.position)
}
let update = GMSCameraUpdate.fit(bounds, withPadding: 60)
mapView.animate(with: update)
func customMarkerView(titleText : String, markerImg : UIImage) -> UIImage{
let mainView : UIView = UIView()
let subView : UIView = UIView()
let padding : CGFloat = 8.0
let rightImgView : UIImageView = UIImageView()
let markerImgView : UIImageView = UIImageView()
let cfont = UIFont(name: "Roboto-Regular", size: 16.0)
//createing marker label.
let titleLabel : UILabel = UILabel(frame: CGRect(x: 4.0, y: 4.0, width: 150.0, height: cfont!.lineHeight))
titleLabel.lineBreakMode = .byWordWrapping
titleLabel.font = cfont!
titleLabel.text = titleText
titleLabel.numberOfLines = 0
titleLabel.sizeToFit()
titleLabel.backgroundColor = UIColor.white
let noLines = titleLabel.frame.size.height / cfont!.lineHeight
if noLines > 2{
titleLabel.numberOfLines = 2
titleLabel.frame = CGRect(x: 4.0, y: 4.0, width: titleLabel.frame.width, height: 2 * cfont!.lineHeight)
}else{
titleLabel.frame = CGRect(x: 4.0, y: 4.0, width: titleLabel.frame.width, height: 24.0)
}
let rightArrow = UIImage(named: "right-arrow")
rightImgView.frame = CGRect(x: titleLabel.frame.origin.x + titleLabel.frame.width + padding, y: 4.0, width: 24.0, height: titleLabel.frame.height)
rightImgView.image = rightArrow!
rightImgView.contentMode = .center
subView.addSubview(titleLabel)
subView.addSubview(rightImgView)
subView.frame = CGRect(x: 0.0, y: 0.0, width: 2 * 4.0 + titleLabel.frame.width + padding + rightImgView.frame.width, height: 2 * 4.0 + titleLabel.frame.height)
subView.backgroundColor = UIColor.white
markerImgView.frame = CGRect(x: subView.center.x - markerImg.size.width/2, y: subView.frame.height + 4.0, width: markerImg.size.width, height: markerImg.size.height)
markerImgView.image = markerImg
markerImgView.contentMode = .scaleAspectFit
mainView.addSubview(markerImgView)
mainView.frame = CGRect(x: 0.0, y: 0.0, width: subView.frame.width, height: subView.frame.height + 4.0 + markerImgView.frame.height)
mainView.addSubview(subView)
mainView.backgroundColor = UIColor.clear
UIGraphicsBeginImageContextWithOptions(mainView.bounds.size, false, UIScreen.main.scale)
mainView.layer.render(in: UIGraphicsGetCurrentContext()!)
let icon : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return icon
}