Switch from Google Maps to the Mapbox iOS SDK

The Mapbox iOS SDK is our vector maps library for iOS. This guide is intended to help developers with Google Maps SDK for iOS experience quickly move their apps to the Mapbox iOS SDK. Both Swift and Objective-C are supported below.

Heads up! We’re still actively developing the Mapbox iOS SDK and will update this guide as we improve its amazing features.

Getting started

Here’s what you’ll need to get started:

New to Mapbox and Google Maps? You might want to start with our First steps with the Mapbox iOS SDK guide.

Initialize a map

Google requires you to set an API key in AppDelegate.m.

In Google Maps:

import GoogleMaps

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let camera = GMSCameraPosition.camera(withLatitude: 0, longitude: 0, zoom: 1)
        let mapView = GMSMapView.map(withFrame: view.frame, camera: camera)
        
        view.addSubview(mapView)
    }
}
#import "ViewController.h"
#import <GoogleMaps/GoogleMaps.h>

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:0
                                                            longitude:0
                                                                 zoom:1];

    GMSMapView *mapView = [GMSMapView mapWithFrame:self.view.frame camera:camera];

    [self.view addSubview:mapView];
}

@end

In Mapbox:

import Mapbox

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let mapView = MGLMapView(frame: view.bounds)

        view.addSubview(mapView)
    }
}
#import "ViewController.h"
#import <Mapbox/Mapbox.h>

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds];

    [self.view addSubview:mapView];
}

@end

In Info.plist, set MGLMapboxAccessToken to your access token.

You also will need to configure an opt-out setting for Mapbox Metrics.

Changing map type/style

In Google Maps:

mapView.mapType = kGMSTypeNormal;

// available types:
//   kGMSTypeNormal
//   kGMSTypeSatellite
//   kGMSTypeTerrain
//   kGMSTypeHybrid
//   kGMSTypeNone
mapView.mapType = kGMSTypeNormal;

// available types:
//   kGMSTypeNormal
//   kGMSTypeSatellite
//   kGMSTypeTerrain
//   kGMSTypeHybrid
//   kGMSTypeNone

In Mapbox:

mapView.styleURL = MGLStyle.lightStyleURL(9)
        
// available styles (see MGLStyle documentation):
//   streetsStyleURL(withVersion:)
//   outdoorsStyleURL(withVersion:)
//   lightStyleURL(withVersion:)
//   darkStyleURL(withVersion:)
//   satelliteStyleURL(withVersion:)
//   satelliteStreetsStyleURL(withVersion:)
mapView.styleURL = [MGLStyle lightStyleURLWithVersion(9)];

// available styles (see MGLStyle documentation):
//   -streetsStyleURLWithVersion:
//   -outdoorsStyleURLWithVersion:
//   -lightStyleURLWithVersion
//   -darkStyleURLWithVersion:
//   -satelliteStyleURLWithVersion:
//   -satelliteStreetsStyleURLWithVersion:

To build your own styles, use Mapbox Studio.

Centering and zooming

In Google Maps:

let camera = GMSCameraPosition.camera(withLatitude: 38.894368,
      longitude: -77.036487, zoom: 16)
mapView.camera = camera
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:38.894368
                                                        longitude:-77.036487
                                                             zoom:16];

[mapView setCamera:camera];

In Mapbox:

let center = CLLocationCoordinate2D(latitude: 38.894368, longitude: -77.036487)
mapView.setCenter(center, zoomLevel: 15, animated: true)
CLLocationCoordinate2D centerCoordinate = CLLocationCoordinate2DMake(38.894368, -77.036487);
[mapView setCenterCoordinate:centerCoordinate zoomLevel:15 animated:YES];

Bounding box fit

In Google Maps:

let sw = CLLocationCoordinate2D(latitude: 45.5087, longitude: -122.6903)
let ne = CLLocationCoordinate2D(latitude: 45.5245, longitude: -122.6503)

let bounds = GMSCoordinateBounds(coordinate: sw, coordinate: ne)

let update = GMSCameraUpdate.fit(bounds)
mapView.moveCamera(update)
CLLocationCoordinate2D sw = CLLocationCoordinate2DMake(45.5087, -122.69);
CLLocationCoordinate2D ne = CLLocationCoordinate2DMake(45.5245, -122.65);

GMSCoordinateBounds *bounds = [[GMSCoordinateBounds alloc] initWithCoordinate:sw coordinate:ne];

GMSCameraUpdate *update = [GMSCameraUpdate fitBounds:bounds];
[mapView moveCamera:update];

In Mapbox:

// Set the map bounds to Portland, Oregon
let bounds = MGLCoordinateBounds(
    sw: CLLocationCoordinate2D(latitude: 45.5087, longitude: -122.69),
    ne: CLLocationCoordinate2D(latitude: 45.5245, longitude: -122.65))

mapView.setVisibleCoordinateBounds(bounds, animated: false)
// Set the map bounds to Portland, Oregon
CLLocationCoordinate2D sw = CLLocationCoordinate2DMake(45.5087, -122.69);
CLLocationCoordinate2D ne = CLLocationCoordinate2DMake(45.5245, -122.65);

[mapView setVisibleCoordinateBounds:MGLCoordinateBoundsMake(sw, ne) animated:NO];

Camera animation

In Google Maps:

...
let coordinate = CLLocationCoordinate2DMake(35.5494, 139.77765)

let camera = GMSCameraPosition(cameraWithTarget: coordinate, zoom: 13.75, bearing: 90, viewingAngle: 40)

mapView.animateToCameraPosition(camera)

In Mapbox:

let coordinate = CLLocationCoordinate2D(latitude: 35.5494, longitude: 139.77765)

let camera = MGLMapCamera(lookingAtCenter: coordinate, fromDistance: 5000, pitch: 40, heading: 90)

mapView.fly(to: camera, completionHandler: nil)
CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(35.5494, 139.77765);

MGLMapCamera *camera = [MGLMapCamera cameraLookingAtCenterCoordinate:coordinate
                                                        fromDistance:5000
                                                        pitch:40
                                                        heading:90];

[mapView flyToCamera:camera completionHandler:nil];

Showing user location

Following a user’s location isn’t easily possible in Google Maps, but they think it’s a “neat idea.”

In Google Maps:

mapView.isMyLocationEnabled = true
// only shows basic location, does not track
mapView.myLocationEnabled = YES;

In Mapbox:

mapView.userTrackingMode = .follow

// available modes:
//   none
//   follow
//   followWithHeading
//   followWithCourse
mapView.userTrackingMode = MGLUserTrackingModeFollow;

// available modes:
//   MGLUserTrackingModeNone
//   MGLUserTrackingModeFollow
//   MGLUserTrackingModeFollowWithHeading
//   MGLUserTrackingModeFollowWithCourse

Add pin/marker annotations

In Google Maps:

class ViewController: UIViewController, MGLMapViewDelegate {
    override func viewDidLoad() {
        ...

        let position = CLLocationCoordinate2D(latitude: 40.717041, longitude: -73.988007)
        let hello = GMSMarker(position: position)
        hello.title = "Hello world!"
        hello.snippet = "Welcome to my marker"
        
        hello.map = mapView
    }
}
@interface ViewController ()
@end

@implementation ViewController

- (void)viewDidLoad {
    ...

    CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(40.717041, -73.988007);
    GMSMarker *hello = [GMSMarker markerWithPosition:coordinate];
    hello.title = @"Hello world!";
    hello.snippet = @"Welcome to my marker";

    hello.map = mapView;
}

@end

In Mapbox:

class ViewController: UIViewController, MGLMapViewDelegate {
    override func viewDidLoad() {
        ...

        // Set the delegate property of our map view to self after instantiating it.
        mapView.delegate = self
        
        // Declare the marker `hello` and set its coordinates, title, and subtitle.
        let hello = MGLPointAnnotation()
        hello.coordinate = CLLocationCoordinate2D(latitude: 40.717041, longitude: -73.988007)
        hello.title = "Hello world!"
        hello.subtitle = "Welcome to my marker"
        
        // Add marker `hello` to the map.
        mapView.addAnnotation(hello)
    }

    // Return `nil` here to use the default marker.
    func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
        return nil
    }
    
    // Allow callout view to appear when an annotation is tapped.
    func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
        return false
    }

}
@interface ViewController () <MGLMapViewDelegate>
@end

@implementation ViewController

- (void)viewDidLoad {
    ...

    // Set the delegate property of our map view to self after instantiating it.
    mapView.delegate = self;

    // Declare the marker `hello` and set its coordinates, title, and subtitle.
    MGLPointAnnotation *hello = [[MGLPointAnnotation alloc] init];
    hello.coordinate = CLLocationCoordinate2DMake(40.717041, -73.988007);
    hello.title = @"Hello world!";
    hello.subtitle = @"Welcome to my marker";

    // Add marker `hello` to the map.
    [mapView addAnnotation:hello];
}

// Return `nil` here to use the default marker.
- (MGLAnnotationView *)mapView:(MGLMapView *)mapView viewForAnnotation:(id <MGLAnnotation>)annotation {
    return nil;
}

// Allow callout view to appear when an annotation is tapped.
- (BOOL)mapView:(MGLMapView *)mapView annotationCanShowCallout:(id <MGLAnnotation>)annotation {
    return YES;
}

@end

Congratulations, you’ve mastered the basics of switching from Google Maps. Check out all of the documentation for more features to try.

Have other comparisons between Google Maps and Mapbox that you’d like to see? Get in touch!

Next article:

Switch from Apple MapKit to the Mapbox iOS SDK

Moving your app from MapKit to Mapbox is as simple as pie.

Additional questions? Ask our support team or learn more about How Mapbox Works.