How to add a button on the Google maps in iOS?

Manas picture Manas · May 20, 2013 · Viewed 16.5k times · Source

I am new to iOS Programming and I have downloaded the google maps sdk for iOS and followed the instruction on their website ( as shown in this link https://developers.google.com/maps/documentation/ios/start ) and was able to get the map in my application.

Now I am trying to add a button on the screen at the bottom over Google maps for giving an option to the user to go back to the previous screen.

I just know that UIButton is a subclass of UIView and we can make a button appear on a view by making it the sub view of that class. Previously iOS used to use Google Maps by default by MKMapView and I have seen examples in books an on the Internet showing screen shots of apps where a button or a text box would appear on the map. But now just dragging the button in the interface builder doesn't help with the SDK of google maps.

Here is my code:

ViewController.h

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>
#import <GoogleMaps/GoogleMaps.h>


@interface ViewController : UIViewController 

@property (weak, nonatomic) IBOutlet UIButton *btn;


@end

ViewController.m

#import "ViewController.h"
#import <MapKit/MapKit.h>
#import <GoogleMaps/GoogleMaps.h>
#import <CoreLocation/CoreLocation.h>


@interface ViewController ()

@end

@implementation ViewController
{
    GMSMapView *mapView_;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)loadView
{
    CLLocationManager *locationManager = [[CLLocationManager alloc] init];
    locationManager.distanceFilter = kCLDistanceFilterNone;

    locationManager.desiredAccuracy = kCLLocationAccuracyKilometer;
    [locationManager startUpdatingLocation];

    //Latitude and longitude of the current location of the device.
    double lati = locationManager.location.coordinate.latitude;
    double longi = locationManager.location.coordinate.longitude;
    NSLog(@"Latitude = %f", lati);
    NSLog(@"Longitude = %f", longi);

    CLLocation *myLocation = [[CLLocation alloc] initWithLatitude:lati longitude:longi];

    // Create a GMSCameraPosition that tells the map to display the coordinate

    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:lati
                                                            longitude:longi
                                                                 zoom:11.5];

    mapView_ = [GMSMapView mapWithFrame:[[UIScreen mainScreen] bounds] camera:camera];
    mapView_.myLocationEnabled = YES;
    self.view = mapView_;

    // Creates a marker in the center of the map.
    GMSMarker *marker = [[GMSMarker alloc] init];
    marker.position = CLLocationCoordinate2DMake(lati, longi);
    marker.title = @"It's Me";
    marker.snippet = @"My Location";
    marker.map = mapView_;

    [mapView_ addSubview:_btn];
    [mapView_ bringSubviewToFront:_btn];

}
@end

You can see that in the last 2 lines I have made the button the subview of mapview and tried to bring it front. But this didn't help. Please let me know what is it that I am missing or if there is another way to do this by using some other function.

Please also do check the screenshot of the storyboard which I have created so that you can understand better what I am trying to do here.

Screenshot of the storyboard

Thanks.

Answer

Lukas Kukacka picture Lukas Kukacka · May 20, 2013

GMSMapView is subclass of UIView so you can add subviews as to any other view

Try this code

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
button.frame = CGRectMake(mapView_.bounds.size.width - 110, mapView_.bounds.size.height - 30, 100, 20);
button.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin;
[button setTitle:@"Button" forState:UIControlStateNormal];
[mapView_ addSubview:button];

It adds 100x20 button as the subview of the GMSMapView, positioned to the bottom right corner. I have tested it and the button can be touched as in any other view

Edit: Also move all your code from -loadView to -viewDidLoad. -loadView method is never called when using IB to create UI. Docs to -loadView says:

If you use Interface Builder to create your views and initialize the view controller, you must not override this method.

Edit 2: I believe when you create view hierarchy using Interface Builder, you CAN NOT reset self.view property like you are doing.

Do this in your -viewDidLoad

[self.view addSubview: mapView_];

instead of

self.view = mapView_;

if you are passing GMSMapView to the self.view property, the map is only view which is in the controller from this point. Thats, I believe, the reason why u can't see your IB-created button.