For many of you, putting a marker on a map was your first experience using Google Maps Platform. And often, that was your first step in using Google’s knowledge of the real world to build immersive and helpful mapping experiences for your users in every corner of the globe. No matter what the use case, industry, or whether you’re building for web or mobile–the marker is almost always a core element for a map-based experience.
One of Google’s developer community’s top requests is for more advanced marker capabilities that are easy to use. Today, Google meeting that demand with the Preview release of Advanced Markers for the Maps JavaScript API. Now, you can create highly customized, faster performance markers that provide a richer user experience, showcase your brand, and save time and resources.
Key capabilities and use cases
The ability to easily customize the default red pin ranks among our most requested features from developers. With the new `PinView` class in Advanced Markers, you can now change the color, background, icon, and outline of the default red pin directly in your code, with no image needed.
This enables a number of use cases. A retailer can change the markers for their store locations to reflect their brand colors. A travel company can change the colors and icons of places around hotels, to make it easier for users to pick their ideal hotel based on the surrounding amenities. Or a logistics company can change the color of a marker to reflect the status of packages or vehicles as changes occur in real-time.
Another option for customizing a marker is to use your own image asset, such as an icon or photo. You now have the ability to use any image format supported by the HTML `img` tag, such as PNGs and SVGs. You can also use CSS to dynamically style and animate Advanced Markers, including changing sizing, opacity, position, color, and more. This makes it easier to add dynamic marker experiences into a Google map than ever before. For example, you can use your logo or other brand assets to incorporate your branding more deeply into your maps.
You can also create custom Advanced Markers using any custom HTML element that responds to user interactions and can be styled with the full flexibility of CSS. With this capability, you can create beautiful, engaging, and interactive marker experiences that were previously difficult to build without the use of complex custom overlays. For example, a real estate company can enable markers to display property prices that respond to user interactions to display additional helpful information, such as the property address, square footage and number of bedrooms and bathrooms.
Improved marker performance and accessibility
Advanced Markers can load up to 66% faster than our traditional markers, and provide faster panning and zooming. The feature also supports fast load times for a larger amount of markers.
Google also made numerous accessibility improvements, enabling you to create products for users that utilize screen readers or keyboard navigation. With these improvements, users can navigate between markers, and drag and drop them, all with the keyboard. The marker title is automatically picked up by the screen reader, and the marker defaults to the accessibility role.