2

I'm adding custom markers to my map using the new google.maps.Marker() JavaScript API method to map a custom list of locations.

Is it possible to add labels to the markers as shown in this screenshot?

The Marker documentation seems to allow this, but the label that's rendered runs into/overlaps with other markers and labels (I think the property is meant to label the marker itself ('A', 'B', 'C', etc).)

Example

Here's an example of what I mean by "Labels overlapping with other markers and labels":

enter image description here

johnwp
  • 706
  • 4
  • 7

1 Answers1

0

As you are using custom markers, it is possible. Google's documentation says:

If you are using a label with a custom marker, you can position the label with the labelOrigin property in the Icon object.

See this working jsbin based off of Google's example for demonstration and guidance. Relevant code below:

  var image = {
    // here's the labelOrigin
    labelOrigin: new google.maps.Point(70, 10)
  };

  var marker = new google.maps.Marker({
     // set the marker's icon to the above image
     icon: image,
     // set a label
     label: {
       color: "black",
       text: "label text here"
     }
  });

Edit

To add a text outline to the label, see answer for related thread How to display a label next to a Marker for Google Maps? and this jsfiddle based off of it.

Hope this helps.

evan
  • 5,443
  • 2
  • 11
  • 20
  • I tried this, but the labels run into one another, and there's no way to add a custom class to style the text with a while outline. – johnwp Aug 29 '19 at 19:12
  • Can you clarify what you mean by labels running into one another? As for text outline please see my edit. – evan Aug 31 '19 at 06:49
  • Thanks @johnwp can you please post a jsfiddle so that i can reproduce this from my side? – evan Sep 05 '19 at 14:52