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
code_block<ListValue: [StructValue([(‘code’, ‘if (googleMap.mapCapabilities.isAdvancedMarkersAvailable) {rn val SALEM = LatLng(42.5230, -70.8955)rn val MUSEUM = LatLng(42.5215276,-70.8988888)rnrn // Customize the background, border, and glyph colors of the pinrn val orangePinConfig = PinConfig.builder()rn .setBackgroundColor(Color.rgb(255, 117, 24))rn .setBorderColor(Color.BLACK)rn .setGlyph(Glyph(Color.YELLOW))rn .build()rnrn // Set the position and set the marker icon to use the customized pinrn val orangeMarkerOptions: AdvancedMarkerOptions = AdvancedMarkerOptions()rn .position(SALEM)rn .icon(BitmapDescriptorFactory.fromPinConfig(orangePinConfig))rnrn // Add the Advanced Marker to the maprn googleMap.addMarker(orangeMarkerOptions)rnrn // Add an Advanced Marker with a custom image as an iconrn googleMap.addMarker(AdvancedMarkerOptions()rn .position(MUSEUM)rn .icon(BitmapDescriptorFactory.fromResource(R.drawable.raven))rn )rn}’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e10a8ffcd00>)])]>
Rendering of the code snippet above showing custom pin colors and a custom image
Getting started
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.
code_block<ListValue: [StructValue([(‘code’, ‘GoogleMap(rn googleMapOptionsFactory = {rn GoogleMapOptions().mapId(“DEMO_MAP_ID”)rn },rn //…rn) {rn val pinConfig = PinConfig.builder()rn .setBackgroundColor(Color.MAGENTA)rn .build()rnrn AdvancedMarker(rn state = MarkerState(position = LatLng(-34, 151)),rn title = “Magenta marker in Sydney”,rn pinConfig = pinConfigrn )rn}’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e10a8ffc040>)])]>
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.
code_block<ListValue: [StructValue([(‘code’, ‘// …rn// Create an Advanced Marker and add it to the map.rnconst marker = new Marker({rn position: {lat: 53.5, lng: 10.05},rn maprn});rnrn// Scale the marker one time as a static propertyrnconst pinScaled = new PinElement({rn scale: 1.5,rn});rnconst markerViewScaled = new AdvancedMarkerElement({rn map,rn position: { lat: 37.419, lng: -122.02 },rn content: pinScaled.element,rn});’), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e10a8ffcbe0>)])]>
code_block<ListValue: [StructValue([(‘code’, “import {Marker} from ‘@googlemaps/adv-markers-utils’;rnrn// …rn// Create an Advanced Marker and add it to the map.rnconst marker = new Marker({rn position: {lat: 53.5, lng: 10.05},rn maprn});rnrn// Scale the marker based on a dynamic property such as the map zoomrnmarker.scale = ({map}) => Math.max(1, Math.pow(1.45, map.zoom) / 64);”), (‘language’, ”), (‘caption’, <wagtail.rich_text.RichText object at 0x3e10b0fe5be0>)])]>
Cloud Blog
