🏑 Home πŸ“– Chapter πŸ‘ˆ Prev πŸ‘‰ Next

⚑  GMapsBook.com is crafted by Jozef Sorocin and powered by:

<aside> πŸ”‘ The materials presented in this chapter deal with low-level APIs. If you’re using a framework like React or Angular, make sure to check out the chapter on Working with Frameworks.


Out of the box, Google Maps lets you add alphanumeric marker labels via the [label property](https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions.label).

These labels were originally designed for rather simple use cases like navigation β€” think routing from A to B via C.

As the web evolved, people started replacing default markers with increasingly complex shapes β€” think real estate listing pins, marker clusters, brand logos and such.

To address this, Google gave developers a helping hand by releasing libraries like the [v3-utility-library](<https://github.com/googlemaps/v3-utility-library>) and esp. [markerwithlabel](<https://github.com/googlemaps/js-markerwithlabel>).

These libraries abstracted away some complexity but most people still resorted to either:

To this day, custom marker labels pose a challenge to Google Maps newbies and practitioners alike. In this chapter, we’ll reduce the complexities of marker labels to the minimum and learn how to bend them to our will.


I’m developing a Google map for the β€œCareers” page of a restaurant chain. I want:

The desired result

The desired result