Implementing a Google Map with UItableviewCell

Question

I am trying to implement a google map inside a UItableviewCell component. The way I am doing this is to define a GMSMapView within the protoype cell, and then using the dequeueReusableCell method i'm configuring the map cell. However, any change i try to apply fails (such as adding markers, camera, zoom, etc.). Does anybody have any information about this issue?

Code reference:

class UITenderInfoMapCell: UITableViewCell {

@IBOutlet weak var view: UIView!
@IBOutlet weak var subView: GMSMapView!

override func awakeFromNib() {

    super.awakeFromNib()
    self.initMap()

}



/**
    Init blank map when initializing a MapCell, waypoints, directions, etc can be loaded later.
**/
func initMap() {

    let camera = GMSCameraPosition.camera(withLatitude: 1.285, longitude: 103.848, zoom: 12)
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    self.subView = mapView


}

Answer 1

Do following steps to add MapView to TableViewCell

1. Take one UIView in your custom Tableviewcell and give the class name as "GMSmapView" to that UIView
2. Make sure to connect delegate method of Mapview.
3. In your ViewController import "GoogleMaps" along with delegate "GMSMapViewDelegate".
4. Make outlet for MapView like this for your created TableViewCell:

import UIKit

import GoogleMaps

class MapviewTableViewCell: UITableViewCell {


@IBOutlet weak var mapviewObj: GMSMapView!

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
}

}

5. Add Following code in "cellForRowAt"

           let cell = tableviewObj.dequeueReusableCell(withIdentifier: "cell") as! MapviewTableViewCell
   
           let marker = GMSMarker()
   
           let lat = Double("13.063754")
           let long = Double("80.24358699999993")
           marker.position = CLLocationCoordinate2DMake(lat!,long!)
   
           ///View for Marker
           let DynamicView = UIView(frame: CGRect(x:0, y:0, width:50, height:50))
           DynamicView.backgroundColor = UIColor.clear
   
           //Pin image view for Custom Marker
           let imageView = UIImageView()
           imageView.frame  = CGRect(x:0, y:0, width:50, height:35)
           imageView.image = UIImage(named:"LocationPin")
   
           //Adding pin image to view for Custom Marker
           DynamicView.addSubview(imageView)
   
           UIGraphicsBeginImageContextWithOptions(DynamicView.frame.size, false, UIScreen.main.scale)
           DynamicView.layer.render(in: UIGraphicsGetCurrentContext()!)
           let imageConverted: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
           UIGraphicsEndImageContext()
   
           marker.icon = imageConverted
           marker.map = cell.mapviewObj
   
           cell.mapviewObj.camera = GMSCameraPosition.camera(withTarget: marker.position, zoom: 11)
   
           return cell
   

NOTE:Here I am giving this some extra code to add your custom marker using "DynamicView". If you dont want to add custom marker, you can skip those code. Also Dont forget to configure require settings for google maps from google developer account and add respective key to you appdelegate e.g.

let key = "keep you key here"
GMSServices.provideAPIKey(key)