Cannot put a google maps GMSMapView in a subview of main main view?

Question

I'm struggling with this problem! I want to add a google maps GMSMapView into a UIView that is only a portion of the main UIView of my ViewController.

It should be simple... I created with the storyboard a UIView of the size I want and put it in the main UIView.

Snippet from Interface file:

@interface MapViewController : UIViewController <CLLocationManagerDelegate>

@property(nonatomic) IBOutlet GMSMapView *mapView;

With the mapView linked with this UIView inside the main UIView.

What I do in the implementation:

@synthesize mapView = _mapView;

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                            longitude:151.2086
                                                                 zoom:10];
    _mapView = [GMSMapView mapWithFrame:_mapView.bounds camera:camera];
    _mapView.myLocationEnabled = YES;

}

This should work, shouldn't it? What I get is that my internal UIView is empty.

If I instantiate a map following google's starting guide Google Map Integration Document, it works but it assigns the map to the MAIN UIView and thats a different thing.

I tried even changing the class of my mapView in the storyboard from UIView to GMSMapView. The map is showed in the inner view but it is initialized in a strange way making

1. The system throwing an error saying

"Failed to make complete frame buffer"

and slowing down a lot the loading of the view (it takes 2-3 seconds on the simulator)

2. The map not responding in any camera change done in the viewDidLoad method.

Any suggestions?

I read some posts here on StackOverflow but couldn't find a valid solution :(

Answer 1

Based on other answers, here are three ways that actually work.

1. Put a view on the XIB and change its class to GMSMapView in XIB builder. See *map1 below. Or...
2. Code it all. Add the map as a subview of the main view. See *map2 below. Or...
3. Add the map as a subview of another subview already in the XIB with an outlet. *map3 below.

.h

@interface GPViewController : UIViewController
@property (strong, nonatomic) IBOutlet GMSMapView *map1;
@property (strong, nonatomic) IBOutlet UIView *plainViewOnXIBHoldsMap3;
@end

.m

- (void)viewDidLoad{
    [super viewDidLoad];
    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.0
                                                        longitude:151.20
                                                             zoom:6];

    /* Option 1. view on XIB is class GSMMapView */
    self.map1.camera = camera;

    /* Option 2. add a map as a subview */
    GMSMapView *map2 = [GMSMapView mapWithFrame:CGRectMake(0, 0, 100, 100) camera:camera];
    [self.view addSubview:map2];

    /* Option 3. add a map to a subview already on the XIB */
    GMSMapView *map3 = [GMSMapView mapWithFrame:self.plainViewOnXIBHoldsMap3.bounds camera:camera];
    [self.plainViewOnXIBHoldsMap addSubview:map3];
}

Answer 2

Have checked out and get working in Swift 2.0 all of the three options provided by cloudsurfin. Translating his answer for those who face the same problem in Swift 2.0:

Option1 - Put a view on the XIB and change its class to GMSMapView in XIB builder.

Option2 - Code it all. Add the map as a subview of the main view.

Option3 - Add the map as a GMSMapView subview of already existing UIView subview.

Explanation of preparations in XIB for Option1:

1) Set a class for your view:

2) Don't forget to connect your view with the outlet in code:

import UIKit
import GoogleMaps

class MapViewController: UIViewController {

    @IBOutlet weak var map1 : GMSMapView!

    @IBOutlet weak var map3 : UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let camera = GMSCameraPosition.cameraWithLatitude(53.9,
        longitude: 27.5667, zoom: 6)

        // Option 1. view on XIB is class GSMMapView
        self.map1.camera = camera;

        // Option 2. add a map as a subview
        let map2 = GMSMapView.mapWithFrame(CGRectMake(0, 64, 320, 460), camera:camera)
        self.view.addSubview(map2)

        // Option 3. add a map to a subview of UIView class that is already on the XIB
        let map3 = GMSMapView.mapWithFrame(self.plainViewOnXIBHoldsMap3.bounds, camera:camera)
        self.plainViewOnXIBHoldsMap3.addSubview(map3)
    }
}

Hope this note helps someone :)

Answer 3

My suggestions:

1. Link the UIView from your storyboard to your header file as a UIView instance variable, not a GMSMapView
2. Change the mapWithFrame:camera: method to be set to your linked UIView's bounds
3. At the end of the viewDidLoad: method, set the UIView instance variable to your GMSMapView, or add a subview. I've had trouble with this as well, and fooling around with this usually will work.

.h

@interface MapViewController: UIViewController <CLLocationManagerDelegate>
{
    IBOutlet UIView *mapViewOnSreen;
}

.m

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Do any additional setup after loading the view.
    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                                longitude:151.2086
                                                                     zoom:10];
    _mapView = [GMSMapView mapWithFrame:mapViewOnScreen.bounds camera:camera];
    _mapView.myLocationEnabled = YES;

    mapViewOnScreen = _mapView
    //OR [self.view addSubview:_mapView];
    //OR [mapViewOnScreen addSubview:_mapView];   <--This worked for me
}

*Edit: I created a small UIView inside the main view using IB. I followed the steps listed and I was able to view the map inside the small UIView when I set [mapViewOnScreen addSubview:_mapView];

Answer 4

you can do it through IB

.h
@property (weak, nonatomic) IBOutlet GMSMapView *theMapView;

.m
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.868
                                                        longitude:151.2086
                                                             zoom:12];

//This next line is not needed if you have a GMSMapView outlet
//self.theMapView = [GMSMapView mapWithFrame:self.theMapView.frame camera:camera];
self.theMapView.camera=camera;
self.theMapView.mapType = kGMSTypeSatellite;
self.theMapView.delegate=self;

Answer 5

I was getting the black screen just because i forgot to add this line:

[super loadView];

Answer 6

For Swift 3 and if you sub class the GMSMapView

1. Add UIView into UIViewController in story board

2. Change class in to GMSMapView instead UiView

3. Create reference in UIViewController class

   @IBOutlet weak var mapView: GMSMapView!
   

4. As you are subclassing you do not need use that GMSMapView.map(withFrame: CGRect.zero, camera: camera) mentioned in the docs. Just load map as follows

       let camera = GMSCameraPosition.camera(withLatitude: 51.50, longitude: -0.076, zoom: 10.0)
       mapView.camera = camera
   

5. In order to add marker

   let marker = GMSMarker()
   marker.position = CLLocationCoordinate2D(latitude: 51.50, longitude: -0.076)
   marker.title = "London"
   marker.snippet = "UK"
   marker.map = mapView
   

6. Together as a function

   override func viewDidLoad() {
   super.viewDidLoad()
   
     load()
   }
   
   func load() {
     //map
     let camera = GMSCameraPosition.camera(withLatitude: 51.50, longitude: -0.076, zoom: 10.0)
     mapView.camera = camera
   
     //marker
     let marker = GMSMarker()
     marker.position = CLLocationCoordinate2D(latitude: 51.50, longitude: -0.076)
     marker.title = "London"
     marker.snippet = "UK"
     marker.map = mapView
   }
   

Answer 7

I spent about a half hour trying to get this to work and then I figured out that I had it in the wrong method. The google getting started example tells you to put it in - (void)loadView but if you do that you get a black screen or a full screen map. You need to put it in - (void)viewDidLoad. Then it works.

Answer 8

set the UIVIEW class to be GMSMapView in the identity inspector.

then make an IBOutlet from it :D and hola it is work :P

Answer 9

(void)viewDidLoad {
    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                        longitude:151.20
                                                             zoom:14];

    GMSMarker *marker = [[GMSMarker alloc] init];
    marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
    marker.title = @"Sydney";
    marker.snippet = @"Australia";
    marker.map = self.mapContainerView;

    //set the camera for the map
    self.mapContainerView.camera = camera;

    self.mapContainerView.myLocationEnabled = YES;
}

Answer 10

Following the google tutorial for Swift in Sep-2017

I fixed by putting the code in viewDidLoad like this

var mapView: GMSMapView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Create a GMSCameraPosition to display the initial center of the map
    let camera = GMSCameraPosition.camera(withLatitude: 23.885942, longitude: 45.079162, zoom: 5.1)

    // Set the frame size , don't forget to replace "<CustomFrame>" with the required frame size
    mapView = GMSMapView.map(withFrame: "<CustomFrame>", camera: camera)

    // Add the map to any view here 
    view.addSubview(mapView)  //or customView.addSubview(mapView)
}

Answer 11

Use viewDidLayoutSubviews to set mapView size.

I simply resolved it by calling function in viewDidLayoutSubviews() instead of viewDidLoad().

@IBOutlet weak var mapView: GMSMapView!

override func viewDidLayoutSubviews() {
        self.setData()
}

func setData(){
    let latitude = YOUR_LAT
    let longitude = YOUR_LONG

    // Do any additional setup after loading the view.
    let camera = GMSCameraPosition.camera(withLatitude: latitude, longitude: longitude, zoom: 14.0)
    let mapView = GMSMapView.map(withFrame: self.mapView.bounds, camera: camera)
    self.mapView.addSubview(mapView)
    
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
    marker.map = mapView
}