Maps with many markers can be hard to navigate. On Google Search, we combat this problem by adding labels to the markers on the associated map. This allows users to associate a marker to the specific search result. Now developers are able to use this labeling property on the Google Maps JavaScript API.

Today, we are introducing a new label property to MarkerOptions that makes labeling your markers easier. The label property allows you to pass a letter, number, or any other character to your map markers, creating a map that is easier to navigate and read.

For example, to add the label A on a markers, you would add “label” to the pin you would like to mark:

var marker = new google.maps.Marker({
  // Supply map and position params as usual.
  label: 'A'
});

This feature is also available on custom icons, so you can continue to keep the same look and feel of your map.

You can set the origin of the text in your icons, as well as control the color of the text. For example:

var beachIcon = {
  url: 'images/beachflag.png',
  labelOrigin: new google.maps.Point(9, 9)
};

var marker = new google.maps.Marker({
  // Supply the map and position parameters as usual.
  icon: beachIcon,
  label: {
    text: '2',
    color: 'purple'
  }
});

For more details, check out the developer's guide and reference. As always, if you have a question, we recommend posting on Stack Overflow using the google-maps-api-3 tag. Happy mapping!

Posted by Richard Wang, Intern, Google Maps JavaScript API team