> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/ja/llms.txt)

# Switch from Google Maps SDK for iOS to Mapbox Maps SDK for iOS

Are you using the **Google Maps SDK for iOS** and want to switch to the **Mapbox Maps SDK for iOS**? This tutorial walks through the core mapping concepts side by side, showing you the Google approach alongside the equivalent Mapbox implementation at each step.

In this tutorial, you will:

-   Add the Mapbox Maps SDK for iOS to your app
-   Initialize a map with SwiftUI
-   Add a marker to the map
-   Show marker details when a user taps it

This screenshot shows the final product you will build in this tutorial.

![Screenshot of an iOS app showing the Ferry Building, Golden Gate Bridge, and Alcatraz Island markers in San Francisco](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--ios-google-migration-2.9ec8507.480.png)

## Prerequisites

This guide assumes familiarity with Swift and iOS development and that you already have an app built with the Google Maps SDK for iOS. Beginner experience with SwiftUI is helpful but not required.

To complete this tutorial, you will need:

-   **A Mapbox access token**: Find yours on the [Access token page](https://console.mapbox.com/account/access-tokens/) of your Mapbox account.
-   **Xcode**: Install Xcode to your device through the Mac App Store.
-   **A working Getting started app**: A SwiftUI iOS app already configured with the Mapbox Maps SDK for iOS and showing a globe, as described in the [Getting started with the Maps SDK for iOS](https://docs.mapbox.com/ios/maps/guides/install/) guide.

![Screenshot of an iOS app showing a globe.](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--ios-geofencing-1.dd91bc2.480.png)

## Initialize a map

Both SDKs render a map inside a view that you add to your app's UI. The APIs look different, but the goal is the same: show a map centered on a location.

This tutorial assumes you have followed the [Getting started with the Maps SDK for iOS](https://docs.mapbox.com/ios/maps/guides/install/) guide. This guide will leave you with a new SwiftUI project open in Xcode showing a globe.

![Screenshot of an iOS app showing a globe.](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--ios-geofencing-1.dd91bc2.480.png)

### Google Maps SDK for iOS

With Google Maps, you created a `GMSMapView` with a starting camera position and added it to your view hierarchy:

```swift
import UIKit
import GoogleMaps

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

        let sanFrancisco = CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)
        let camera = GMSCameraPosition.camera(withTarget: sanFrancisco, zoom: 12.0)
        let mapView = GMSMapView.map(withFrame: view.bounds, camera: camera)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(mapView)
    }
}
```

### Mapbox Maps SDK for iOS

With Mapbox, the map is a native SwiftUI view. You place a `Map` directly in your view hierarchy and set its initial viewport:

```swift
import SwiftUI
import MapboxMaps

struct ContentView: View {
    var body: some View {
        let center = CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)
        Map(initialViewport: .camera(center: center, zoom: 12, bearing: 0, pitch: 0))
            .ignoresSafeArea()
    }
}
```

Run the app to see a full-screen map centered on San Francisco.

![Screenshot of an iOS app showing a map of San Francisco.](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--ios-google-migration-1.52b2012.480.png)

Key differences:

-   **Map initialization**: Google's `GMSMapView` is a `UIKit` view that you add to a view controller's view hierarchy, or wrap in a `UIViewRepresentable` to use from SwiftUI. Mapbox's `Map` is a native SwiftUI view you place directly in your view hierarchy, with no bridging required.
-   **Coordinates**: Both SDKs use `CLLocationCoordinate2D(latitude:longitude:)`, so there's no coordinate conversion to worry about when you migrate.
-   **Camera**: Google configures the camera through a `GMSCameraPosition` passed to the map on creation. Mapbox uses a `Viewport` passed to the `Map` view's `initialViewport` parameter.

## Add markers and callouts

Now you are ready to add multiple markers and show marker details when a user taps one.

### Google Maps SDK for iOS

With Google Maps, you created a list of San Francisco locations, added a `GMSMarker` for each one, and implemented the delegate method that fires when a marker's information window is tapped.

```swift
import UIKit
import GoogleMaps

private struct Place {
    let name: String
    let description: String
    let coordinate: CLLocationCoordinate2D
}

private let places = [
    Place(name: "Ferry Building", description: "San Francisco, CA", coordinate: CLLocationCoordinate2D(latitude: 37.7955, longitude: -122.3937)),
    Place(name: "Golden Gate Bridge", description: "San Francisco, CA", coordinate: CLLocationCoordinate2D(latitude: 37.8199, longitude: -122.4783)),
    Place(name: "Alcatraz Island", description: "San Francisco Bay", coordinate: CLLocationCoordinate2D(latitude: 37.8267, longitude: -122.4230))
]

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

        let center = CLLocationCoordinate2D(latitude: 37.8140, longitude: -122.4317)
        let camera = GMSCameraPosition.camera(withTarget: center, zoom: 11.0)
        let mapView = GMSMapView.map(withFrame: view.bounds, camera: camera)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.delegate = self
        view.addSubview(mapView)

        for place in places {
            let marker = GMSMarker(position: place.coordinate)
            marker.title = place.name
            marker.snippet = place.description
            marker.map = mapView
        }
    }

    // Google Maps shows the marker's title and snippet in a built-in info window automatically.
    func mapView(_ mapView: GMSMapView, didTapInfoWindowOf marker: GMSMarker) {
        print("Tapped \(marker.title ?? "") — \(marker.snippet ?? "")")
    }
}
```

### Mapbox Maps SDK for iOS

With Mapbox, use `MapViewAnnotation` to place a custom SwiftUI view — a pin icon plus an optional callout — at each location, and manage which marker is selected with `@State`.

```swift
import SwiftUI
import MapboxMaps

/// A point of interest to display on the map.
struct Place: Identifiable {
    let id = UUID()
    let name: String
    let description: String
    let coordinate: CLLocationCoordinate2D
}

struct ContentView: View {
    // Three points of interest in San Francisco.
    private let places = [
        Place(
            name: "Ferry Building",
            description: "San Francisco, CA",
            coordinate: CLLocationCoordinate2D(latitude: 37.7955, longitude: -122.3937)
        ),
        Place(
            name: "Golden Gate Bridge",
            description: "San Francisco, CA",
            coordinate: CLLocationCoordinate2D(latitude: 37.8199, longitude: -122.4783)
        ),
        Place(
            name: "Alcatraz Island",
            description: "San Francisco Bay",
            coordinate: CLLocationCoordinate2D(latitude: 37.8267, longitude: -122.4230)
        )
    ]

    // The place whose callout is currently shown, if any.
    @State private var selectedPlaceID: Place.ID?

    var body: some View {
        // Center the camera on San Francisco.
        let center = CLLocationCoordinate2D(latitude: 37.8140, longitude: -122.4317)

        Map(initialViewport: .camera(center: center, zoom: 11, bearing: 0, pitch: 0)) {
            ForEvery(places) { place in
                // A marker for each place. Tapping it toggles the callout.
                MapViewAnnotation(coordinate: place.coordinate) {
                    VStack(spacing: 0) {
                        if selectedPlaceID == place.id {
                            callout(for: place)
                        }
                        marker(isSelected: selectedPlaceID == place.id)
                            .onTapGesture {
                                withAnimation {
                                    selectedPlaceID = (selectedPlaceID == place.id) ? nil : place.id
                                }
                            }
                    }
                }
                .allowOverlap(true)
            }
        }
        .ignoresSafeArea()
    }

    // MARK: - Marker

    private func marker(isSelected: Bool) -> some View {
        Image(systemName: "mappin.circle.fill")
            .font(.system(size: 30))
            .foregroundStyle(.white, isSelected ? .red : .blue)
            .background(Circle().fill(.white).padding(4))
            .shadow(radius: 2)
    }

    // MARK: - Callout

    private func callout(for place: Place) -> some View {
        VStack(alignment: .leading, spacing: 2) {
            Text(place.name)
                .font(.headline)
            Text(place.description)
                .font(.caption)
                .foregroundStyle(.secondary)
        }
        .padding(8)
        .background(.background, in: RoundedRectangle(cornerRadius: 8))
        .shadow(radius: 3)
        .padding(.bottom, 4)
        .frame(maxWidth: 220)
    }
}
```

This section shows how both SDKs add the same three San Francisco markers and respond to user interaction. In Google Maps, the marker title and snippet populate a built-in information window, and the `GMSMapViewDelegate` handles taps. In Mapbox, you build each `MapViewAnnotation` from your own SwiftUI views, so the pin icon and callout card are views you compose and toggle with `@State` — there's no separate information window API to learn.

Run the app to see the Ferry Building, Golden Gate Bridge, and Alcatraz Island markers in San Francisco. Tap a marker to show its callout.

![Screenshot of an iOS app showing the Ferry Building, Golden Gate Bridge, and Alcatraz Island markers in San Francisco](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--ios-google-migration-2.9ec8507.480.png)

## Next steps

**Congratulations!** You have switched a Google Maps SDK for iOS workflow to the Mapbox Maps SDK for iOS.

### What we covered

-   Adding the Mapbox Maps SDK for iOS dependency and access token
-   Initializing a map with SwiftUI's `Map` view
-   Adding a `MapViewAnnotation` marker to the map
-   Showing marker details in a custom callout view when tapped

Explore more iOS mapping tutorials:

-   [Build an iOS marker app from a custom style and tileset](https://docs.mapbox.com/help/ja/tutorials/ios-marker-app-custom-style/)
-   [Add Interactions to your Map in iOS](https://docs.mapbox.com/help/ja/tutorials/ios-interactions/)
-   [Add Location Search to an iOS app](https://docs.mapbox.com/help/ja/tutorials/ios-location-search/)
-   [Implement Geofencing in an iOS App](https://docs.mapbox.com/help/ja/tutorials/ios-geofencing/)

> **Related content (guide): [Mapbox Maps SDK for iOS](https://docs.mapbox.com/ios/maps/guides/)**
> 
> Full guide documentation for the Mapbox Maps SDK for iOS.

> **Related content (tutorial): [Use Offline Maps in an iOS app](https://docs.mapbox.com/help/ja/tutorials/ios-offline-maps/)**
> 
> Learn how to download and use offline maps in your iOS app with the Maps SDK for iOS.

> **Related content (tutorial): [Run the Maps SDK for iOS Examples App](https://docs.mapbox.com/help/ja/tutorials/maps-sdk-ios-examples-app/)**
> 
> Set up and run the Mapbox Maps SDK for iOS examples app to explore more capabilities.