Creating Custom Info Window in Swift with the Google Maps iOS Sdk

Adding Custom Info Window to Google Maps

you have to use GMSMapViewDelegate to use markerInfoWindow to your class.

let mapview = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

mapview.delegate = self


func mapView(_ mapView: GMSMapView, markerInfoWindow marker: GMSMarker) -> UIView? {
// Get a reference for the custom overlay
let index:Int! = Int(marker.accessibilityLabel!)
let customInfoWindow = Bundle.main.loadNibNamed("CustomInfoWindow", owner: self, options: nil)?[0] as! CustomInfoWindow
customInfoWindow.Timings.text = States[index].time
customInfoWindow.Title.text = States[index].name
customInfoWindow.Direction_Button.tag = index
customInfoWindow.Direction_Button.addTarget(self, action: #selector(GetDirectionsAction(sender:)), for: .touchUpInside)

return customInfoWindow
}

Custom marker infowindow using google maps ios sdk and swiftui

I think that you could use UIHostingController in this situation. I haven't tried this in Google maps as I don't have a project that uses them so YMMV, but it could at least give you a starting point.

To use UIHostingController we can pass the SwiftUI view that we want to use. You can style the size of it inside your SwiftUI or you can add a frame to the callout.

func mapView(_ mapView: GMSMapView, markerInfoWindow marker: GMSMarker) -> UIView {
print("Showing marker infowindow")
let callout = UIHostingController(rootView: MarkerInfoWindow())
callout.view.frame = CGRect(x: 0, y: 0, width: self.view.frame.width - 48, height: 200)
return callout.view
}

Your MarkerInfoWindow looks like you are planning to have a button in it, I am not sure how you would implement that, it may be a simple case of adding a button in the SwiftUI code, though I know from past experience that it is difficult to interact with a callout if the button isn't inside one of the callout accessories.


This is what I did in MapKit to show the callout

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
let callout = UIHostingController(rootView: MarkerInfoWindow())
callout.view.frame = CGRect(x: 0, y: 0, width: mapView.frame.width - 48, height: 200)
view.addSubview(callout.view)
}

Custom info window in IOS google maps sdk

ended up using SMCalloutView @ https://github.com/nfarina/calloutview

How to customise googlemap infoWindow using Swift 3

Did you implement GMSMapViewDelegate?

ViewController: GMSMapViewDelegate {

...

}

It seems to be that you are getting the error(crash) because you are setting the delegate to self, but your controller does not conform to that protocol.

Custom Info Window for Google Maps

For those who's trying to add buttons to a custom view representing info window - it seems to be impossible to do, because Google Maps SDK draws it as an image or something like this. But there is a quite simple solution:

  1. You have to create a custom view with buttons and whatever you need to be displayed in your info window.
  2. Add it as a subview in your mapView(mapView: GMSMapView, didTapMarker marker: GMSMarker) method. You can set a position of a custom view by getting a coordinates of a marker tapped with a help of mapView.projection.pointForCoordinate(marker.position)
  3. Your custom view possibly has to change it position by following camera position, so you have to handle mapView(mapView: GMSMapView, didChangeCameraPosition position: GMSCameraPosition) where you could easily update your custom view position.

    var infoWindow = CustomInfoView()
    var activePoint : POIItem?

    func mapView(mapView: GMSMapView, didTapMarker marker: GMSMarker) -> Bool {
    if let poiItem = marker as? POIItem {
    // Remove previously opened window if any
    if activePoint != nil {
    infoWindow.removeFromSuperview()
    activePoint = nil
    }
    // Load custom view from nib or create it manually
    // loadFromNib here is a custom extension of CustomInfoView
    infoWindow = CustomInfoView.loadFromNib()
    // Button is here
    infoWindow.testButton.addTarget(self, action: #selector(self.testButtonPressed), forControlEvents: .AllTouchEvents)

    infoWindow.center = mapView.projection.pointForCoordinate(poiItem.position)
    activePoint = poiItem
    self.view.addSubview(infoWindow)
    }
    return false
    }

    func mapView(mapView: GMSMapView, didChangeCameraPosition position: GMSCameraPosition) {

    if let tempPoint = activePoint {
    infoWindow.center = mapView.projection.pointForCoordinate(tempPoint.position)
    }

    }


Related Topics



Leave a reply



Submit