Google Maps GMSMapView on custom UIView

Question

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:

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?

Answer 1

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

Answer 2

We can use zPosition in iOS.

If we have a view named salonDetailView, eg:

@IBOutlet weak var salonDetailView: UIView!

in my case see the image

and have UIView for GMSMapView, eg:

@IBOutlet weak var mapViewUI: GMSMapView!

To show salonDetailView upper of the mapViewUI use zPosition as below:

salonDetailView.layer.zPosition = 1

Answer 3

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

Answer 4

Here's a very simple way to get a Google Maps hooked up to a View in your ViewController in a storyboard (Swift 4.2, Xcode 10).

I'm calling my ViewController MapLocationsViewController.

1. So, in your storyboard, make sure the class on your ViewController is properly referencing your correct class (MapLocationsViewController for me in this example).

2. Next, drag a View object onto that ViewController and set that class to GMSMapView.

3. Hook that View object up to an @IBOutlet in your code (which I named viewForGoogleMap in my example).

Here's a minimalistic example code:

import UIKit
import GoogleMaps
class MapLocationsViewController: UIViewController {
    @IBOutlet weak var viewForGoogleMap: GMSMapView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let mapView = GMSMapView(frame: self.view.bounds)
        viewForGoogleMap.addSubview(mapView)
    }
}

For further info, check out the Google Maps docs.

Answer 5

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.

Answer 6

Very Simple. Use Following Steps

1) Open Storyboard: Drop a UIView from Object library in your ViewController.

2) Make custom view outlet in your class. (viewForGMap in my code)

3) Add following line for code in your class.

class GMapVC: UIViewController {

@IBOutlet weak var viewForGMap: UIView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.

    let camera = GMSCameraPosition.camera(withLatitude: 28.7041, longitude: 77.1025, zoom: 10.0)
    let mapView = GMSMapView.map(withFrame: self.viewForGMap.frame, camera: camera)
    self.view.addSubview(mapView)

    // Creates a marker in the center of the map.
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: 28.7041, longitude: 77.1025)
    marker.title = "Delhi"
    marker.snippet = "India’s capital"
    marker.map = mapView

   }

OutPut: