How to add multiple clickable markers that popUp image when click in Googlemap

119 views Asked by At

I added mapView with @IBOutlet and the extension of GMSMapViewDelegate{}

below code able to parse the returned json result. The code will get the image url and Latlon.

Problems:

  1. the markers are added in the googlemap BUT the map does not show them at center so you donot scroll to look for the markers

  2. How to implement the clickable Marker when click it will fetch the image base on the image URL

import UIKit
import Foundation
import GoogleMaps
import GooglePlaces


class ViewController: UIViewController {

    @IBOutlet weak var mapView: GMSMapView!
      
    override func viewDidLoad() {
        super.viewDidLoad()
       
        mapView.delegate = self

        getJsonMapData()
    }
    
    func getJsonMapData(){
        
        guard let mapUrl = URL(string: "https://xxxxxxxx/traffic-images") else { return }
        
        URLSession.shared.dataTask(with: mapUrl) { (data, response, error) in
        
            guard error == nil else { return}
            guard let data = data else { return}
            
            let dataString = String(data: data, encoding:.utf8)
            
            do {
                
                    let jsonDecoder = JSONDecoder()
                    jsonDecoder.dateDecodingStrategy = .iso8601
                    let LocationArrDict = try jsonDecoder.decode(Location.self, from: data)
                
                    let items = LocationArrDict.items
                
                                  
                        for item in items {
                  
                            let cams = item.cameras
                            
                            for cam in cams {
                        
                             let strimgUrl = cam.image
                             let lat: Double =  Double(cam.location.latitude)
                             let lon: Double = Double(cam.location.longitude)
            
                             let  GpsMarker = GMSMarker()
                             GpsMarker.position = CLLocationCoordinate2D(latitude: lat, longitude: lon)

                             //GpsMarket.iconView = UIImageView(image: ??? how to add the image url  ??)
                              
                              DispatchQueue.main.async {
                            
                              GpsMarker.map = self.mapView
                              self.view.addSubview(self.mapView)
                              
                            }
                        }
                    }
            } catch {
                print(error)
            }
            
        }.resume()
    }
}
        
extension ViewController:GMSMapViewDelegate{}



//----------------------- return Json String:

{
   "items":[
      {
         "timestamp":"2020-12-05T08:45:43+08:00",
         "cameras":[
            {
               "timestamp":"2020-11-05T08:42:43+08:00",
               "image":"https://xxxxxxxxx/traffic-images/2020/12/2ab06cd8-4dcf-434c-b758-804e690e57db.jpg",
               "location":{
                  "latitude":1.29531332,
                  "longitude":103.871146
               },
               "camera_id":"1001",
               "image_metadata":{
                  "height":240,
                  "width":320,
                  "md5":"c9686a013f3a2ed4af61260811661fc4"
               }
            },
            {
               "timestamp":"2020-11-05T08:42:43+08:00",
               "image":"https://xxxxxxxxxx/traffic-images/2020/12/9f6d307e-8b05-414d-b27d-bf1414aa2cc7.jpg",
               "location":{
                  "latitude":1.319541067,
                  "longitude":103.8785627
               },
               "camera_id":"1002",
               "image_metadata":{
                  "height":240,
                  "width":320,
                  "md5":"78060d8fbdd241adf43a2f1ae5d252b1"
               }
             },

                    ........

            {
               "timestamp":"2020-12-05T08:42:43+08:00",
               "image":"https://xxxxxx/traffic-images/2020/12/98f64fe6-5985-4a8a-852f-0be24b0a6271.jpg",
               "location":{
                  "latitude":1.41270056,
                  "longitude":103.80642712
                },
                 "camera_id":"9706",
                 "image_metadata":{
                  "height":360,
                  "width":640,
                  "md5":"f63d54176620fa1d9896fa438b3cc753"
                }
            }
          ]
        }
  
       ],
  
      "api_info":{
         "status":"healthy"
       }
}




0

There are 0 answers