swiftgoogle-maps-sdk-ios

How to make a custom iconView in google maps with swift?


I need to do something like this map with marker and label

a marker with a static label in google maps sdk for iOS


Solution

  • If there is gonna be a lot of markers, I do not recommend using iconView because it makes UI so laggy, but here it goes:

    Create a UIView file as "MarkerInfoView", which will be created as MarkerInfoView.xib

    Then design your UI in there, add your imageView for your icon, then add other necessary views to complete your iconView. Also include marker in the design as an imageView. Because Im not 100% sure but I think you cant use both iconView and icon in google maps.

    Then create a swift file called "MarkerInfoView.swift", go to MarkerInfoView.xib and select it's class as MarkerInfoView.

    Then create another swift file, lets call it PlaceMarker, inside that file you will create a class which will conform to GMSMarker, then you will initialize your view to set it equal to iconView in PlaceMarker class. Lets do it as following:

    class PlaceMarker: GMSMarker {
    //Initialize with lat and long, then set position equal to the coordinate.
    // 'position' comes from inheriting from GMSMarker, which is google marker.
    init(latitude: Double, longitude: Double, distance: Double, placeName: String) {
        super.init()
        if let lat: CLLocationDegrees = latitude,
            let long: CLLocationDegrees = longitude {
            let coordinate = CLLocationCoordinate2D(latitude: lat, longitude: long)
            position = coordinate
        }
    
        let view = Bundle.main.loadNibNamed("MarkerInfoView", owner: nil, options: nil)?.first as! MarkerInfoView
        // you can set your view's properties here with data you are sending in initializer.
        // Remember if you need to pass more than just latitude and longitude, you need
        // to update initializer.
        // lets say you created 2 outlet as placeNameLabel, and distanceLabel, you can set
        // them like following:
        view.placeNameLabel.text = placeName
        view.distanceLabel.text = distance
    
        // Once your view is ready set iconView property coming from inheriting to
        // your view as following:
    
        iconView = view
        appearAnimation = .pop //not necessarily but looks nice.
    
    }
    }
    

    Then when you have your data and your googlemaps view in a ViewController you can set like:

    let latitude = 101.432432 //arbitrary, should come from your source
    let longitude = 34.432124 
    let distance = 4
    let placeName = "My place".
    let marker = PlaceMarker(latitude: latitude, longitude: longitude, distance: distance, placeName: placeName)
    marker.map = self.mapView // your google maps set your marker's map to it.