custom Google Maps blue dot in Swift

139 Views Asked by At

What I want to achieve is to customize google maps blue dot with an svg icon, with the icon moving when location is changed.

The the situation I want to achieve.

what I am doing:

struct GoogleMapsView: UIViewRepresentable {
    @ObservedObject var locationManager = LocationManager.shared
    
    @State var myLocationDot = GMSMarker()
    @Binding var nearbyDrivers: [NearbyDriver]
    
    
    init(nearbyDrivers: Binding<[NearbyDriver]>){
        self._nearbyDrivers = nearbyDrivers
        myLocationDot.position = locationManager.userLocation!.coordinate
    }
    
    func makeUIView(context: Context) -> GMSMapView {
        let camera = GMSCameraPosition.camera(withLatitude: locationManager.userLocation!.coordinate.latitude, longitude: locationManager.userLocation!.coordinate.longitude, zoom: 15)
        let mapView = GMSMapView(frame: CGRect.zero, camera: camera)
        
        
        myLocationDot.position = CLLocationCoordinate2D(latitude: locationManager.userLocation!.coordinate.latitude, longitude: locationManager.userLocation!.coordinate.longitude)
        let myLocationDotIcon = UIImage(named: "myLocationDotIcon.svg")
        let myLocationDotIconImage = UIImageView(image: myLocationDotIcon!)
        myLocationDotIconImage.frame = CGRect(x: 0, y: 0, width: 40, height: 50)
        myLocationDot.iconView = myLocationDotIconImage
        myLocationDot.zIndex = 1
        myLocationDot.map = mapView
        
        
        // MARK: - Load nearby drivers
        if !nearbyDrivers.isEmpty {
            for driver in nearbyDrivers {
                let marker = GMSMarker()
                marker.position = CLLocationCoordinate2D(latitude: driver.location.lat, longitude: driver.location.long)

                let locationIcon = UIImage(named: "carAnnotation.png")
                let locationIconImage = UIImageView(image: locationIcon!)
                locationIconImage.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
                marker.iconView = locationIconImage
                marker.zIndex = 0
                marker.map = mapView
            }
        }
        
        //MARK: - MapStyle
        do {
            if let styleURL = Bundle.main.url(forResource: "style", withExtension: "json") {
                mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)
            } else {
                NSLog("Unable to find style.json")
            }
        } catch {
            NSLog("One or more of the map styles failed to load. \(error)")
        }
        return mapView
    }
    
    func updateUIView(_ uiView: GMSMapView, context: Context) {
        uiView.isMyLocationEnabled = false
    }
    
    
    func makeCoordinator() -> Coordinator {
        Coordinator(myLocationDot: $myLocationDot, owner: self)
    }
    
    class Coordinator: NSObject, GMSMapViewDelegate, CLLocationManagerDelegate {
        
        @ObservedObject var locationManager = LocationManager.shared
        @Binding var myLocationDot: GMSMarker
        let owner: GoogleMapsView
        
        
        init(myLocationDot: Binding<GMSMarker>, owner: GoogleMapsView) {
            self.owner = owner
            _myLocationDot = myLocationDot
        }
        
        func didTapMyLocationButton(for mapView: GMSMapView) -> Bool {
            mapView.animate(toLocation: locationManager.userLocation!.coordinate)
            return true
        }
        
        func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
            myLocationDot.position = locations.last!.coordinate
        }
    }
}

The idea is that I need to change the blue dot appearance but leave the functionalities as they need to be.

For some reason I can't find any course on advanced google maps customization. if you could refer a guy that does the thing, that would be awesome.

0

There are 0 best solutions below