Skip to content
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Advanced Markers, now available for iOS and Android: Easily customize your markers across platforms
Colin Zhang
Group Product Manager, Google Maps Platform
Oct 31, 2023
Try Google Maps Platform
Unlock access to real-world data and insights with a monthly $200 Google Maps Platform credit.
Get started

The ability to customize Google markers ranks among our most requested features. In May, we made Advanced Markers generally available for the Maps JavaScript API and today we are announcing support for Android and iOS, enabling developers to build experiences that are consistent across platforms.

Halloween themed markers to highlight and navigate between Points of Interest on mobile

Halloween themed markers to highlight and navigate between Points of Interest on mobile

With Advanced Markers, you can create highly customized, faster performant markers to drive a richer user experience. You can customize the Google Maps pin using SVGs, PNGs, or native views (for Android) and UIViews (for iOS) to create custom markers and control collision behavior—all with improved load times over traditional markers. You can also save developer time and resources with the ability to customize the Google Maps red pin directly in code without a PNG for each variation.

Google pins customized into Halloween-themed markers

Google pins customized into Halloween-themed markers

Creating custom pin colors and a custom image in Kotlin

if (googleMap.mapCapabilities.isAdvancedMarkersAvailable) {
    val SALEM = LatLng(42.5230, -70.8955)
    val MUSEUM = LatLng(42.5215276,-70.8988888)

    // Customize the background, border, and glyph colors of the pin
    val orangePinConfig = PinConfig.builder()
        .setBackgroundColor(Color.rgb(255, 117, 24))
        .setBorderColor(Color.BLACK)
        .setGlyph(Glyph(Color.YELLOW))
        .build()

    // Set the position and set the marker icon to use the customized pin
    val orangeMarkerOptions: AdvancedMarkerOptions = AdvancedMarkerOptions()
        .position(SALEM)
        .icon(BitmapDescriptorFactory.fromPinConfig(orangePinConfig))

    // Add the Advanced Marker to the map
    googleMap.addMarker(orangeMarkerOptions)

    // Add an Advanced Marker with a custom image as an icon
    googleMap.addMarker(AdvancedMarkerOptions()
            .position(MUSEUM)
            .icon(BitmapDescriptorFactory.fromResource(R.drawable.raven))
    )
}

Code snippet to create custom pin colors and a custom image in Kotlin

Copied to clipboard!
Rendering of the code snippet above showing custom pin colors and a custom image

Rendering of the code snippet above showing custom pin colors and a custom image

Getting started with Advanced Markers for mobile apps

To learn more about Advanced Markers, please check out our website and documentation for Android and iOS support. For Android developers, marker clustering of Advanced Markers is also supported in the Maps SDK for Android Utility Library, and the Maps Compose Library provides composables for Advanced Markers as well as Jetpack Compose-compatible marker clustering of Advanced Markers. If you’re ready to get started, head to the Cloud console.

GoogleMap(
    googleMapOptionsFactory = {
        GoogleMapOptions().mapId("DEMO_MAP_ID")
    },
    //...
) {
    val pinConfig = PinConfig.builder()
        .setBackgroundColor(Color.MAGENTA)
        .build()

    AdvancedMarker(
        state = MarkerState(position = LatLng(-34, 151)),
        title = "Magenta marker in Sydney",
        pinConfig = pinConfig
    )
}

Adding an Advanced Marker to a map in an Android app using Jetpack Compose

Copied to clipboard!

Advanced Markers Utility Library for Maps JavaScript API

We have also released an Advanced Markers Utility Library for JavaScript developers. This library simplifies common patterns for using Advanced Markers by combining all features from the google.maps.marker.AdvancedMarkerElement and google.maps.marker.PinElement classes into a single interface and supporting dynamic properties. It also provides some useful features like automatic color selection, handling for icon-fonts, and automatic handling of small to medium datasets.

// ...
// Create an Advanced Marker and add it to the map.
const marker = new Marker({
    position: {lat: 53.5, lng: 10.05},
    map
});

// Scale the marker one time as a static property
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});

Customizing the scale of Advanced Markers with the Maps JavaScript API normally

Copied to clipboard!
import {Marker} from '@googlemaps/adv-markers-utils';

// ...
// Create an Advanced Marker and add it to the map.
const marker = new Marker({
    position: {lat: 53.5, lng: 10.05},
    map
});

// Scale the marker based on a dynamic property such as the map zoom
marker.scale = ({map}) => Math.max(1, Math.pow(1.45, map.zoom) / 64);

Customizing the scale of Advanced Markers with the Advanced Markers Utility Library which supports dynamic properties

Copied to clipboard!

For more information on Google Maps Platform, visit our website.

Clay cityscape
Clay cityscape
Google Maps Platform
Get going with Google Maps Platform