Select platform: [Android](https://developers.google.com/maps/documentation/maps-3d/android-sdk/marker-customization.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/marker-customization.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/3d/marker-customization.md.txt "View this page for the JavaScript platform docs.")

<br />

![Map of San Francisco with custom styled markers](https://developers.google.com/static/maps/documentation/maps-3d/ios-sdk/images/custom-markers-ios.png)

You can customize the appearance of markers by passing a `Pin.Configuration`
instance to `(Marker3D.Style.pin(_:))` allowing you change the background and
border colors, glyph text and color,


altitude

, image to be used, and more
options for additional customization.

The following code sample shows how to create a new marker and style it using
some of the available customization options:

```swift
Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}
```

This page shows you how to customize markers in the following ways:

- [Scale the marker](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/marker-customization.md.txt#scale)
- [Change the background color](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/marker-customization.md.txt#background_color)
- [Change the border color](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/marker-customization.md.txt#border_color)
- [Add text to a glyph](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/marker-customization.md.txt#glyph_text)

## Scale the marker

To scale a marker, use the `scale` option:

```swift
Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 35.6762, longitude: 139.6503, altitude: 0.0),
        label: "Tokyo",
        style: .pin(
          .init(
            backgroundColor: .blue,
            borderColor: .yellow,
            scale: 2.0
            ) {Text("G").minimumScaleFactor(0.01)}
        )
  )
}
```

## Change the background color

Use the `backgroundColor` parameter on `Pin.Configuration` to change the
background color of a marker:

```swift
Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
    label: "Paris",
    style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
  )
}
```

## Change the border color

Use the `borderColor` parameter on `Pin.Configuration` to change the border
color of a marker:

```swift
Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: -22.9068, longitude: -43.1729, altitude: 0.0),
    label: "Rio de Janeiro",
    style: .pin(.init(backgroundColor: .green, borderColor: .brown)) // Customizes the pin border
  )
}
```

## Add text to a glyph

Use the glyph `@ViewBuilder` closure parameter on `Pin.Configuration` to replace
the default glyph with a text character. The text glyph of the marker scales
with the marker:

```swift
Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: 25.2048, longitude: 55.2708, altitude: 0.0),
    label: "Dubai",
    style: .pin(.init(backgroundColor: .green) {
        Text("D") // Adds text inside the marker glyph
    })
  )
}
```