Google Maps GMSMapView on custom UIView

I want to display google maps on a view that’s then added to self.view, rather than drawing the map directly on self.view. Therefore, I created a view in storyboard and changed its class to GMSMapView. I also created an outlet connection to that view called gmView.

I am using the following code that does unfortunately not show the map:

  • AFNetworking 2.0 - How to download uiimage async
  • Change a UIViewController to a UITableViewController inside a storyboard?
  • iOS - color on xcode simulator is different from the color on device
  • Swift - “use of unresolved identifier”
  • How to loop through all UIButtons in my Swift view?
  • Infinitely scrolling in both directions of UICollectionView with sections
  • let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: GMSCameraPosition.camera(withLatitude: 51.050657, longitude: 10.649514, zoom: 5.5))
    gmView = mapView
    

    Also, I tried adding the mapView to self.view as a subview, like this:

    self.view.addSubview(mapView)
    

    …and inserting it:

    self.view.insertSubview(mapView, at: 0)
    

    Note that I’m using Auto Layout if that changes anything.

    None of these approaches seem to work for me.
    Any ideas?

    4 Solutions Collect From Internet About “Google Maps GMSMapView on custom UIView”

    If you want to add a mapView after the loading of the view, then you need to create an object of GMSMapView. So break the outlets of your mapView since it will be created dynamically.

    import UIKit
    import GoogleMaps
    
    class MapViewController: UIViewController {
    
        //Take a Google Map Object. Don't make outlet from Storyboard, Break the outlet of GMSMapView if you made an outlet
        var mapView:GMSMapView?
    
        override func viewDidLoad() {
    
            super.viewDidLoad()
    
            mapView = GMSMapView.map(withFrame: CGRect(x: 100, y: 100, width: 200, height: 200), camera: GMSCameraPosition.camera(withLatitude: 51.050657, longitude: 10.649514, zoom: 5.5))
    
            //so the mapView is of width 200, height 200 and its center is same as center of the self.view
            mapView?.center = self.view.center
    
            self.view.addSubview(mapView!)
    
        }
    }
    

    Here is the output. mapView is of width = 200 and height = 200 with center as same as self.view

    enter image description here

    I finally figured out how to display the map in a UIView created in Storyboard and center it in a specific location.

    Note: After created the UIView outlet, I changed its class to GMSMapView as explained before.

    import UIKit
    import GoogleMaps
    
    class ViewController: UIViewController {
    
        @IBOutlet weak var searchBar: UISearchBar!
        @IBOutlet weak var toolBar: UIToolbar!
        @IBOutlet weak var mapView: GMSMapView!
    
        override func viewDidLoad() {
    
            super.viewDidLoad()
    
            let camera = GMSCameraPosition.camera(withLatitude: 52.520736, longitude: 13.409423, zoom: 12)
            self.mapView.camera = camera
    
            let initialLocation = CLLocationCoordinate2DMake(52.520736, 13.409423)
            let marker = GMSMarker(position: initialLocation)
            marker.title = "Berlin"
            marker.map = mapView
    
        }
    

    And this is the output:
    Map centred in Berlin

    You can position a blank UIView in your layout, and set its class in the inspector as a GMSMapView. You won’t need to programmatically instantiate it.

    Then just get a reference via outlet to the view and set your coordinates/camera.

    CGRect.zero will return a view with zero height and zero width. It will be invisible.

    Also, it doesn’t really make sense to add it in to the storyboard if you want to do your own allocation. You should instead just create a property of the view controller programmatically, and set its frame to be whatever you want.

    Note, when you call ‘addSubview’ to a view, it will always be added to the top of the view, so there’s no need to insert it at a given index. Using auto-layout is good, but viewDidLoad() gets called before all of the constraints are set. If you want to be able to set your mapView’s frame = self.view, you would want to do that in viewDidAppear() instead.