How to animate Google Map to current marker positions and draw lines in Swift

Question

I am getting locations from Firestore and successfully show the marker on particular locations on Google Map but the problem I am facing when I run the app in Simulator it is not animating to the current marker positions. And I don't know how can I draw the route between the markers. Please help?

Here is the code of getting locations from Firestore in swift.

for document in snapshot!.documents {
print(document.data())
let marker = GMSMarker()

self.location.append(Location(trackingData: document.data()))

print(self.location)

let latitude = document.data()["Latitude"] ?? 0
print(latitude)
let longitude = document.data()["longitude"] ?? 0
print(longitude)

    marker.position = CLLocationCoordinate2D(latitude: latitude as! CLLocationDegrees , longitude: longitude as! CLLocationDegrees)
    marker.map = self.mapView
    marker.userData = self.location
    marker.icon = UIImage(named: "marker")
    print("Data stored in marker \(marker.userData!)")
 }

Answer 1

You can achieve this with GMSCoordinateBounds

Reference: https://stackoverflow.com/a/45169325/8447312

Have a bounds object before your for loop:

var bounds = GMSCoordinateBounds()

Then in your for loop you will make each marker's position to be included in bounds object:

var bounds = GMSCoordinateBounds()

for document in snapshot!.documents {
    print(document.data())
    let marker = GMSMarker()

    self.location.append(Location(trackingData: document.data()))
    let latitude = document.data()["Latitude"] ?? 0
    let longitude = document.data()["longitude"] ?? 0

    marker.position = CLLocationCoordinate2D(latitude: latitude as! CLLocationDegrees , longitude: longitude as! CLLocationDegrees)
    marker.map = self.mapView
    marker.userData = self.location
    marker.icon = UIImage(named: "marker")

    //include position for each marker
    bounds = bounds.includingCoordinate(marker.position)
 }

 //when your loop is completed you included all your marker's coordinate in your bounds now, you need to animate:

 mapView.animate(with: GMSCameraUpdate.fit(bounds, with: UIEdgeInsets(top: 20.0, left: 20.0, bottom: 20.0, right: 20.0)))

I gave 20 insets for each side, you can change it to a value of your desire.

About drawing lines try this:

Create a path right above you create bounds:

let path = GMSMutablePath()

Then in your for loop add each marker's position to this path like you did for bounds:

path.add(marker.position)

At the end before animating your mapView create directions like:

let directions = GMSPolyline(path: path)
directions.strokeWidth = 1.0
directions.map = mapView

Whole code (paths added):

var bounds = GMSCoordinateBounds()
var path = GMSMutablePath()

for document in snapshot!.documents {
    print(document.data())
    let marker = GMSMarker()

    self.location.append(Location(trackingData: document.data()))
    let latitude = document.data()["Latitude"] ?? 0
    let longitude = document.data()["longitude"] ?? 0

    marker.position = CLLocationCoordinate2D(latitude: latitude as! CLLocationDegrees , longitude: longitude as! CLLocationDegrees)
    marker.map = self.mapView
    marker.userData = self.location
    marker.icon = UIImage(named: "marker")

    bounds = bounds.includingCoordinate(marker.position)
    path.add(marker.position)
 }

 let directions = GMSPolyline(path: path)
 directions.strokeWidth = 1.0
 directions.map = mapView

 mapView.animate(with: GMSCameraUpdate.fit(bounds, with: UIEdgeInsets(top: 20.0, left: 20.0, bottom: 20.0, right: 20.0)))