For many years Google Maps Platform (further, GMP) regularly updates its products to provide the most significant location-based experience for its customers. One of the fundamental elements of Google Maps’ users towards building the immersive mapping experience are markers, those multicolored pins you see all over the maps. It is also the main and one of the primary ways the user interacts with maps.
In this blog, we would like to tell you more about Google Maps’ release of advanced markers based on insights from Alicia Sullivan, the Product Manager at the Google Maps Platform.
The advanced markers capabilities were one of the top requests of the GMP developer’s community. So, let’s see how the Google Map team met these demands and how you can create highly customized, faster performance markers for the best user experience for your customers.
Sure, you are accustomed to the ordinary red pin ranks that usually appear on your selected map location. Now, it is possible to customize the marker’s background, border, glyph, color, and marker size and place a custom graphic image. And even more, you can outline the default red pin directly in your code, with no image needed.
For example, if you are a retailer and have some locations in the city presented on maps, you can adjust your markers with your brand-colored icons. For a delivery or logistics company, the icon color can be changed according to the package status or vehicles and be updated in real-time. For instance, the advanced markers possibilities enable the travel company to 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.
Now, Google Maps provides direct support for SVGs and PNGs to create custom markers. So you can customize your map markers with your image asset, such as an icon or photo. To create visually distinctive interactive markers and animations, you can use CSS and dynamically style and animate your advanced markers, including changing sizing, opacity, position, color, and more.
You can use custom HTML and CSS to create dynamic markers to make your maps more interactive and animated. Since all the Advanced Marker instances are added to the DOM (Document Object Model) as HTML elements, they can be operated as any other DOM element. So you can apply CSS styles to the default marker and create custom markers from scratch using HTML and CSS. With these opportunities, the engaging mapping experience is easy to build and does not include complex custom overlays. For example, if you are a real estate company, you can visualize the prices of the houses on your markers and some additional information, such as an address, square, and others.
Suppose you think such a vast and complex animation and dynamic can badly influence your maps’ speed and accessibility. It is not at all true! Advanced markers can load up to 66% faster than our traditional markers and zoom and pan faster than before.
The Google Maps team also worked on accessibility improvements, enabling users to navigate between markers using only the keyboard. From now, when a marker is clickable or draggable, it can respond to keyboard and mouse input.
Constantly working towards the most outstanding location-based solutions, the Google Maps team enables you to reimagine one of the fundamental parts of the users’ mapping experience.
Cloudfresh is a unique hub of expertise for Google Cloud, Zendesk, Asana, and Gitlab. For more information on GMP products and capabilities, you can contact Cloudfresh experts who are Google Maps Certified Product Specialists, as follows:
- Maps Technical Fundamentals;
- Maps Sales Fundamentals.
What do we offer?
- Consultations on the selection of the optimal API and its integration;
- Google Maps Platform-based development services to enable efficient API implementation while minimizing quota usage and maximizing performance;
- Technical training of your teams on the full range of services that Google Maps APIs can offer;
- Technical support: resolving incidents on the Google Maps Platform, requests for the correct use of services, etc. Technical support guarantees a response within the SLA.
By cooperating with Cloudfresh, you additionally receive the following:
- Access to a seven-level discount system is possible only in cooperation with a Google Maps partner;
- Payment by invoice to a legal entity in EU, USD, CKZ, PLN, UAH, or any other currency;
- Collaboration in your native language, thanks to the multilingualism of our team;
- Professional support throughout the process of using the services.
Contact our team and take the chance to improve your IT infrastructure and take your customers’ user experience to the next level with Google Maps solutions.
Order the consultation