Get updates on your email

Tuesday, October 10, 2017

Custom Marker Snippet for Google Map Using Swift 4

Before moving you need to implement google map on a view controller. Which you can find anywhere easily. This tutorial will tell you how you can add a marker and when you tap on that market it will display a custom snippet with button and label.

Make a UIView .xib and assign it a class.

Make a new Cocoa Touch Class which would be the subclass of UIView
Assign this class to the xib you just created and make IBOutlet of the objects.

Make sure you have extended your viewController with:

and declare the following variables

var tappedMarker = GMSMarker()
var infoWindow = emergencyInfo(frame: CGRect(x: 0, y: 0, width: 300, height: 165))

Then in viewDidLoad() you have

mapView.delegate = self
and add a marker on the map after that
let marker = GMSMarker()
marker.position = CLLocationCoordinate2D(
latitude: (PUT_LAT_VALUE_HERE)!,
longitude: (PUT_LAT_VALUE_HERE)!) = self.mapView

Add a class methods in your viewController class as:
class func instanceFromNib() -> emergencyInfo {
        return UINib(nibName: "emergencyInfo", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! emergencyInfo    }

Make sure to change emergencyInfo which is my class name to your own. (The first letter of this name is small it is by mistake)

No you might have the following functions already established as you need have already implemented the map.

and might be some other methods. However for showing custom snippet you need to do the following;

func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
                let location = CLLocationCoordinate2D(latitude: marker.position.latitude, longitude: marker.position.longitude)
                tappedMarker = marker
        phoneNumbtoCall = "Add_string_here"
        infoWindow.removeFromSuperview()        infoWindow = ViewController.instanceFromNib() //make sure to change the name from ViewController to your own ViewController
        infoWindow.phoneNumberOfCenter.text"Add_string_here" = mapView.projection.point(for: location)
        infoWindow.callNowButton.addTarget(self, action: #selector(callbuttonTapped), for: .touchUpInside)
        infoWindow.getDirectionsButton.addTarget(self, action: #selector(directioButtonTapped), for: .touchUpInside)
return false

Next you need to add the following functions:

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

    func mapView(_ mapView: GMSMapView, didChange position: GMSCameraPosition) {
                    self.view.bringSubview(toFront: switchView)
            let location = CLLocationCoordinate2D(latitude: tappedMarker.position.latitude, longitude: tappedMarker.position.longitude)
   = mapView.projection.point(for: location)
    func mapView(_ mapView: GMSMapView, didTapAt coordinate: CLLocationCoordinate2D) {
        infoWindow.removeFromSuperview()    }

These three functions will make sure your snippet stays where it is and change with camera. Run the code and it'll work.

Have any questions leave them in comments here or ask here.

No comments:

Post a Comment