On October 6, 2022, Google Announced the Preview of Advanced Markers: the brand new solution for highly customised markers on the Google Maps Platform.
This will give developers the possibility to easily create highly performant markers.
For businesses, this is a great opportunity to create markers that better represent the business and provide users with additional information, information which, until now, was unavailable on the Google Maps Platform.
Some of the new functionalities
Users will be able to easily customise the default red pin marker.
From now on you can easily change its colour, outline, background and glyph (icon inside the marker)
Example: You will be able to change the markers to reflect your brand colours.
Another example – if you are a logistics company, you will also be able to dynamically change the colour of the pin marker to show real-time information for your package or vehicle status.
Create custom markers using SVG, Image marker or custom HTML element instead of a simple Pin Marker.
If you want to change the standard Pin marker that we all know well, you could also choose an SVG or Image marker. This will help you be more original and recognisable, and allow users to easily associate the chosen image with what your product is about.
Create dynamic markers to offer a more interactive experience.
You can also use CSS to create custom animated markers – change size, opacity, position and more when a user hovers the mouse over the marker. This is a great opportunity for businesses to incorporate brand elements into their maps experience.
Dynamic markers will respond to user interactions (click, touch, and rollover events) to make the marker more dynamic and interactive.
Example: Showing real-time information about the weather in different locations when a rollover event occurs.
Create custom advanced markers using any custom HTML element and style it with CSS.
This will help show users relevant information about what they are searching for.
For example, a user searching for a hotel to stay in, will be able to see its prices, number of rooms left etc., when hovering the mouse over the hotel’s pin marker on Google Maps.
Another example is a real estate company which can display property prices, square footage, number of bedrooms/bathrooms.
Manage collision behaviour.
Specify how markers behave when they collide with other markers, labels and other elements on the map.
This will help you provide a better visual experience, avoid collision and overlapping of texts and icons and be sure that your most important markers are kept visible.
In conclusion, Google informs that advanced markers will load up to 66% faster than the current traditional markers.
You are now able put thousands of markers on the map simultaneously to accommodate larger scale use cases and datasets.
Sources
Images credit © Google