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
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
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
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
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
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
For more information on Google Maps Platform, visit our website.
