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 our developer community’s top requests is for more advanced marker capabilities that are easy to use. Today, we’re 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
_Customize the Google Maps red pin_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.
A representative mockup showing how a company can change the colors and icons of points of interest
A representative mockup of a logistics company changing the color of a marker to reflect the status of a package or vehicle
Customize the Google Maps red pin, or create your own custom markers with SVGs or other images
_Direct support of SVGs and PNGs to create custom markers_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.
A representative mockup showing custom animated markers built with SVG images
_Create contextual, interactive experiences with custom markers_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.
A representative mockup of a real estate company using custom markers with HTML elements to display property prices
Visit our demo to explore these and other use cases.Improved marker performance and accessibility
Advanced Markers can load up to 66% faster than our traditional markers, and provide faster panning and zooming.1 The feature also supports fast load times for a larger amount of markers.
A map loading, panning and zooming 500 markers, using Advanced Markers
We’ve 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.
Advanced Markers enables you to create products that utilize screen readers or keyboard navigation
Getting Started with Advanced Markers
Like the recent Preview release of Data-driven styling, Advanced Markers is included with Dynamic Maps for Maps JavaScript API as the latest feature added to Cloud-based maps styling. To get started with Advanced Markers and learn about additional features, check out the documentation and view this video.
We can’t wait to see how you’ll reimagine this fundamental part of your mapping experiences.
1. Internal benchmark tests were done on an Advanced Markers map with 500 markers. Actual results will vary based on a number of factors, including but not limited to advanced markers configurations, application implementation, browsers, and hardware specifications.