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

# Markers

**Markers** are a SwiftUI convenience feature that creates customizable pin-style markers displayed above the map. They are ideal for quickly symbolizing a point on the map without needing custom image assets.

**Benefits:**

-   No image assets required - uses built-in default marker design
-   Simple API with essential customization options (color, stroke, inner color, text)
-   Quick to implement for common use cases

**Limitations:**

-   SwiftUI only (not available in UIKit)
-   Limited styling compared to annotations or view annotations
-   Less efficient for large datasets (100+ markers)

> **Note: Experimental Feature**
> 
> Markers are currently marked as experimental with `@_spi(Experimental)`. Import MapboxMaps with `@_spi(Experimental) import MapboxMaps` to use this feature.

## Adding a basic marker

The simplest way to add a marker is to specify a coordinate:

```swift
import SwiftUI
@_spi(Experimental) import MapboxMaps

struct MyMapView: View {
    var body: some View {
        Map {
            Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        }
    }
}
```

![A map displaying a single default marker](https://docs.mapbox.com/ios/ja/assets/ideal-img/maps-examples-default-marker-basic.45bc000.480.png)

## Customizing markers

You can customize markers with colors, strokes, and text:

### Colors and strokes

```swift
Map {
    Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        .color(.blue)           // Set the main marker color
        .stroke(.purple)        // Add a stroke color
        .innerColor(.white)     // Set the inner circle color
}
```

### Adding text

```swift
Map {
    Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        .color(.red)
        .text("New York City")
}
```

### Removing strokes

To remove the stroke, set it to `nil`:

```swift
Map {
    Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        .stroke(nil)  // No stroke
}
```

![A map showing customized markers with different colors, strokes, and text](https://docs.mapbox.com/ios/ja/assets/ideal-img/maps-examples-default-marker-customized.96a390f.480.png)

## Adding multiple markers

Use `ForEvery` to add multiple markers from a data collection:

```swift
struct Location {
    let id: UUID
    let coordinate: CLLocationCoordinate2D
    let name: String
}

struct MyMapView: View {
    let locations: [Location] = [
        Location(id: UUID(), coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060), name: "New York"),
        Location(id: UUID(), coordinate: CLLocationCoordinate2D(latitude: 34.0522, longitude: -118.2437), name: "Los Angeles"),
        // ... more locations
    ]
    
    var body: some View {
        Map {
            ForEvery(locations, id: \.id) { location in
                Marker(coordinate: location.coordinate)
                    .color(.red)
                    .text(location.name)
            }
        }
    }
}
```

![A map displaying multiple markers with different colors and text labels](https://docs.mapbox.com/ios/ja/assets/ideal-img/maps-examples-default-marker-multiple.fb35bad.480.png)

## Removing markers

In SwiftUI, Markers conform to [`MapContent`](https://docs.mapbox.com/ios/maps/api/latest/documentation/mapboxmaps/mapcontent/). Removing them from the `Map` block will also remove them from the map. This also works for conditional rendering. The code snippet below uses an `if` statement and a boolean state variable to control the visibility of a `Marker`.

```swift
@State var showMarker = false
Map {
    if showMarker {
        Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
          .color(.blue)
          .stroke(.purple)
          .innerColor(.white)
    } 
}
```

## Performance considerations

Markers create separate SwiftUI views, so performance may degrade with large numbers of markers. For scenarios with 100+ markers, consider:

-   Using [`PointAnnotation`](https://docs.mapbox.com/ios/ja/maps/guides/add-your-data/annotations/#point-annotations) instead for better performance
-   Using [Style Layers](https://docs.mapbox.com/ios/ja/maps/guides/add-your-data/style-layers/) for maximum performance with large datasets