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

Answer 1

Those answers didn't work for me as I wanted. As an improvement for @Rajan's answer, I thought of adding an UIView to storyboard View Controller with desired constraints. Then I added another UIView inside that as child and then I changed class name to GMSMapView. After that I made an Outlet to UIViewController.

@IBOutlet weak var GMSMap: GMSMapView!

override func viewDidLoad() {
    super.viewDidLoad()
    let mapView = GMSMapView.map(withFrame: GMSMap.frame, camera: GMSCameraPosition.camera(withLatitude: 6.9271, longitude: 79.8612, zoom: 10))
    let marker = GMSMarker()

    marker.position = CLLocationCoordinate2D(latitude: 6.9271, longitude: 79.8612)
    marker.title = "Colombo"
    marker.snippet = "Sri Lanka"
    marker.map = mapView
    self.view.addSubview(mapView)

}

Answer 2

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 3

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 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

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:

Answer 6

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.