How to add a map to a SwiftUI view

Asked on 07/30/2024

1 search

Tailscan

This post is brought to you by Tailscan,
the best devtool for Tailwind CSS.

Want to sponsor? We'd love to chat →

To add a map to a SwiftUI view, you can use the MapKit framework. Here's a basic example of how to do it:

Import MapKit: First, make sure to import the MapKit framework in your SwiftUI view file.
```
import SwiftUI
import MapKit
```

Create a Map View: You can create a Map view and configure it with the necessary properties.

struct ContentView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194),
        span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
    )

    var body: some View {
        Map(coordinateRegion: $region)
            .frame(height: 300)
    }
}

Run the App: This will display a map centered on the specified coordinates (in this case, San Francisco).

For more advanced usage, such as displaying place details or using place identifiers, you can refer to the session Unlock the power of places with MapKit from WWDC 2024. This session covers how to reference places using an identifier, show details about a place in your app's UI, and find places effectively using enhancements to the search APIs.

Relevant Sessions

These sessions provide a comprehensive overview of integrating maps and other advanced features into your SwiftUI applications.

Get started with HealthKit in visionOS

Get started with HealthKit in visionOS

Discover how to use HealthKit to create experiences that take full advantage of the spatial canvas. Learn the capabilities of HealthKit on the platform, find out how to bring an existing iPadOS app to visionOS, and explore the special considerations governing HealthKit during a Guest User session. You’ll also learn ways to use SwiftUI, Swift Charts, and Swift concurrency to craft innovative experiences with HealthKit.

Unlock the power of places with MapKit

Unlock the power of places with MapKit

Discover powerful new ways to integrate maps into your apps and websites with MapKit and MapKit JS. Learn how to save and reference unique places using Place ID. Check out improvements to search that make it more efficient to find relevant places. Get introduced to the new Place Card API that lets you display rich information about places so customers can explore destinations right in your app. And, we’ll show you quick ways to embed maps in your website with our simplified token provisioning and Web Embed API.

SwiftUI essentials

SwiftUI essentials

Join us on a tour of SwiftUI, Apple’s declarative user interface framework. Learn essential concepts for building apps in SwiftUI, like views, state variables, and layout. Discover the breadth of APIs for building fully featured experiences and crafting unique custom components. Whether you’re brand new to SwiftUI or an experienced developer, you’ll learn how to take advantage of what SwiftUI has to offer when building great apps.

How to add a map to a SwiftUI view | Ask WWDC