Google Maps Integration iOS Swift. Part 4

Description: — GoogleMaps with custom theme and Clustering. iOS Swift

Next i want to add some markers and cluster them

1. Let’s create som MarkerModel with lat and long :

struct Location {
  let lat: Double
  let long: Double
}

2. Now we need to create some test locations to add test Markers on the map,

to show our marker on map we need to create GMSMarker object and pass them on our map, for now i want to create [Location] inside my MapViewController, and show markers on map based on my [Location].

-add markers

// inside MapViewController
let markers: [Location] = [
   Location(lat: 51.506865, long: -0.117092),
   Location(lat: 51.507865, long: -0.116092),
   Location(lat: 51.508865, long: -0.115092),
   Location(lat: 51.509865, long: -0.114092),
   Location(lat: 51.519865, long: -0.113092),
   Location(lat: 51.529865, long: -0.102092),
   Location(lat: 51.539865, long: -0.141092),
   Location(lat: 51.549865, long: -0.130092),
   Location(lat: 51.503865, long: -0.128092)
]

• create GMSMarker from Location and put it on Map and add them on map:

-method to create and place marks on mapView

private func addMarkers() {
    markers.forEach({
      let position = CLLocationCoordinate2D(latitude: $0.lat,
                                            longitude: $0.long)
      let marker = GMSMarker(position: position)
      marker.map = mapView
})
}
// insideMapViewController
//viewWillAppear
addMarkers()
}

And as the result is:

And it’s time to implement ClusterManager:

• First of all now it’s time to import GoogleMapsUtils to our MapViewController

-Based on GoogleMaps Doc article to implemen Cluster manager we need to implement three common objects:

• GMUClusterIconGenerator: Provides application logic that fetches the cluster icons to be used at different zoom levels.
• GMUClusterAlgorithm: Specifies an algorithm that determines the behavior of how markers are clustered, such as the distance between markers to include in the same cluster.
• GMUClusterRenderer: Provides application logic that handles the actual rendering of the cluster icons on the map.
• Step by step: i’m creating options GMUClusterManager then GMUClusterIconGenerator, GMUClusterAlgorithm, GMUClusterRenderer
• Then i need to remove markers from map view and add them to cluster, let’s go

import GoogleMapsUtils
// inside MapViewController at the top
//ClusterManager instance
private var clusterManager: GMUClusterManager?
....
// inside MapViewController somewhere near lifeCycle methods:
 private func configCluster() {
    guard let mapView = mapView else { return }
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView,
    clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView,
                                       algorithm: algorithm, 
                                       renderer: renderer)
}
.....
// call configCluster inside viewDidLoad()

• Now we need a little update of addMarkers func:

private func addMarkers() {
    markers.forEach({
        let position = CLLocationCoordinate2D(latitude: $0.lat,
                                              longitude: $0.long)
        let marker = GMSMarker(position: position)
        clusterManager?.add(marker)
})
clusterManager?.cluster()
}

after we added marker to cluster we need to run cluster() method to cluster begin his job

Let’s run the App:

YEEEH!

Link to 1 part

Link to 2 part

Link to 3 part

Link to 5 part