Custom infoView for array of markers swift

Question

I have an application where I am working with Googlemaps, I am able to create markers for all the coordinates needed but the issue I am facing now is I want to show a custom UIView when a user taps on a marker to show the info associated with that marker

func showFeaturedProperties(properties: [FeaturedProperties]) {
        self.properties = properties
        properties.forEach { (props) in
            var lat = Double(props.latitude!) as! Double
            var lng = Double(props.longitude!) as! Double


            let marker = GMSMarker()
            marker.position = CLLocationCoordinate2D(latitude: lat,
                                                     longitude: lng)
            marker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
            marker.isFlat = true
            marker.map = mapView
            if props.typeId == 1 {
                marker.icon = #imageLiteral(resourceName: "_map_rent_icon")
            } else {
                marker.icon = #imageLiteral(resourceName: "_map_buy_icon")
            }

            marker.setIconSize(scaledToSize: .init(width: 25, height: 25))
            marker.iconView?.contentMode = .scaleAspectFit
            self.markers.append(marker)
        }

    }

The above code shows the marker on the map, how can I show Details when the marker is clicked?

I have so far extended the GMSMapViewDelegate

func mapView(_ mapView: GMSMapView, markerInfoContents marker: GMSMarker) -> UIView? {

        if let index = markers.index(of: marker) {
            let tappedState = properties[index]
            log(tappedState.id)
        }

        let infoView = BaseCardView()

        return infoView
    }

this does not work still any help is welcomed

How do you want the custom view to appear/be presented onto the screen? — trndjc, May 31 '19 at 23:06
@bsod like a tool tip. a UIView with the details contained in that coordinate — King, May 31 '19 at 23:32
You don't need a custom view, Google Maps has a built-in info window (tooltip) for markers: https://developers.google.com/maps/documentation/ios-sdk/marker#add_an_info_window — trndjc, May 31 '19 at 23:42
They're easy to customize: https://stackoverflow.com/questions/16746765/custom-info-window-for-google-maps — trndjc, May 31 '19 at 23:43
I have an array of markers on the map, so the examples I have been seeing does not highlight for such instance — King, May 31 '19 at 23:52
More like every marker point has different content but I’m using a single uiview. Two tooltip cannot be opened — King, Jun 01 '19 at 00:40
That's what the built-in tooltip does, a single view for the open marker. — trndjc, Jun 01 '19 at 01:10

Yogesh Tandel · Answer 1 · 2019-06-01T12:53:44.177

Create infowindow marker view with xib file

import UIKit
import GoogleMaps
class InfoMarkerView: UIView {

var view:UIView!
var parentVC:StartRideViewController?

override init(frame: CGRect) {
super.init(frame: frame)
setup()
}

required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
setup()
}

func setup() {
view = loadViewFromNib()
view.frame = bounds
view.autoresizingMask = UIViewAutoresizing.flexibleWidth
view.autoresizingMask = UIViewAutoresizing.flexibleHeight
addSubview(view)
}

func loadViewFromNib() -> UIView {
let bundle = Bundle(for:type(of: self))
let nib = UINib(nibName: "InfoMarkerView", bundle: bundle)
let view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView
return view
}

func UpdateView(marker:GMSMarker){
// set values to labels here
}
}

Add GMSMapViewDelegate to your viewcontroller file

var mapView: GMSMapView!
var infoMarkerView:InfoMarkerView?

 if(latitude != 0 && longitude != 0){
                let position = CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
                let marker = GMSMarker(position: position)

                var myData = Dictionary<String, Any>()
                myData["title"] = ridername
                myData["snippet"] = ridertime
                myData["photoUrl"] = photoUrl
                myData["position"] = position
                myData["accuracy"] = accuracy
                myData["uid"] = riderUID
                myData["status"] = riderStatus
                marker.userData = myData


                marker.title = ridername
                marker.snippet = ridertime
                marker.position = position
                marker.iconView = self.showImageonMap(imgPath:photoUrl)

                marker.map = self.mapView


            }

// MARK: GMSMapViewDelegate method implementation

func mapView(_ mapView: GMSMapView!, didTapAt coordinate: CLLocationCoordinate2D) {
print("here")
if infoMarkerView != nil {
    infoMarkerView?.removeFromSuperview()
}
}

func mapView(_ mapView: GMSMapView, didTap overlay: GMSOverlay)
{
print(overlay.zIndex)
print("User Tapped Layer: \(overlay)")
if infoMarkerView != nil {
    infoMarkerView?.removeFromSuperview()
}
}

func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool     {
//let update = GMSCameraUpdate.zoom(by: zoomLevel)
//mapView.animate(with: update)

if infoMarkerView != nil {
    infoMarkerView?.removeFromSuperview()
}
infoMarkerView = InfoMarkerView(frame: CGRect(x: marker.infoWindowAnchor.x, y: marker.infoWindowAnchor.y, width:180, height: 120))
infoMarkerView?.parentVC = self
// Offset the info window to be directly above the tapped marker
infoMarkerView?.center = mapView.projection.point(for: marker.position)
infoMarkerView?.center.y = (infoMarkerView?.center.y)! - 125
infoMarkerView?.UpdateView(marker: marker)

mapView.addSubview(infoMarkerView!)
return true
}

func mapView(_ mapView: GMSMapView, didBeginDragging marker: GMSMarker) {
if infoMarkerView != nil {
    infoMarkerView?.removeFromSuperview()
}
}

func mapView(_ mapView: GMSMapView, didChange position: GMSCameraPosition) {
if infoMarkerView != nil {
    infoMarkerView?.removeFromSuperview()
}
}

Custom infoView for array of markers swift

1 Answers1