IssueTracker

See also http://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters

This isn't a duplicate of 816. 816 is about adding support for multiple chars with the *default* (ie Google supplied) icons. 816 is 7 years old and was raised before the APIs for custom icons or labels existed. I can see why 816 is a won't fix, because it's impossible to have a default icon which can accommodate arbitrary numbers of digits. It makes sense for the default icon to just support a single char.

The v3 API now allows us to provide custom icons (ie ones which you provide yourself) and labels. My issue is about allowing the label and icon APIs to work well together. If you are using a custom icon, it would be very helpful to be able to specify the label to go along with that icon without the API discarding everything but the first letter (which limits the usefulness of this API). My feature request is to have a mechanism to disable that behaviour.

If it is desirable not to change the existing label API, perhaps one approach could be to have a maxLabelLength option on icon or label which defaults to 1, but can be specified as a higher value if the icon can support a wider label. This would then be used when truncating the label.

I have tried modifying the html source of the created label div, and the existing css styles seem to format the text correctly for longer labels (tested up to 4 chars) across IE8-11, Chrome, Safari and FF browsers (os x). Obviously there may be subtlety that I'm not aware of here, but it seems like there wouldn't need to be changes to the styling.

Could this be reopened or some more feedback given why this is won't fix?

Sounds fair.

Thanks very much for reopening this.

I guess another thing to point out is that I think this would allow people to stop using the Marker With Label [1], which seems to be the recommended way to show long labels. Unfortunately, Marker With Label has a problem with overlapping markers [2], so I found it necessary to use this fork [3].

If the label text accepted HTML, this might also reduce the need for js-rich-marker in some cases.

[1] https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/src/markerwithlabel.js
[2] https://code.google.com/p/google-maps-utility-library-v3/issues/detail?id=24
[3] https://github.com/cdaguerre/gmaps-utility-library

i don't understand how can i show more than one character, i need to show a whole word. please help

I too think that the single character is of little use. I already have a requirement for at least 3 characters!

Simple solution to this is:

for (i = 0; i < locations.length; i++) {
      k = i + 1;
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),    
        map: map,
        icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + k + '|FF0000|000000'
      });

where the variable k which is the row number in this example. ie if I had a 100 rows of addresses, this would give me marker labels of 1 to 100. "k" could be replaced by a string, a variable or a combination of both.

I was thinking it should even be possible to attach another icon/symbol as the label (and not just text). Right now, the only practical way to achieve this is to compose the marker icon/symbol together with the label (probably as svg).

All things being said, the existing label text has such limited use, that it might as well not exist!

At the very least, I would suggest id'ing the div holding the label, so we can access it through javascript. That way, after it loads, we can manipulate it, instead of traversing the dom looking for it.

This is a canvas solution :

// no render to increase perf
var canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    marker_label = '01';

if (canvas.getContext){
    var imageObj = new Image();
    imageObj.src = 'https://YOUR_MARKER_URL;

    canvas.width = 32;
    canvas.height = 32;
    //ctx.clearRect(0, 0, canvas.width, canvas.height); // if more markers (in loop)

    $(imageObj).on('load', function() { // it's a jquery method but you can change this
        ctx.drawImage(imageObj, 0, 0); //background

        // labeltext
        ctx.font =  '17px "Trebuchet Ms"';

        var metrics = ctx.measureText( marker_label),
            textWidth = metrics.width;
        xPosition = (canvas.width / 2) - (textWidth / 2); // center horizontal
        yPosition = (canvas.height / 2) + 3; // vertical offset

        ctx.fillStyle  = "#000000";
        ctx.fillText( marker_label, xPosition ,yPosition);

        image = canvas.toDataURL("image/png");

        oMarker.setIcon( image); // update image to marker when is done
    });
}

delete canvas;

// add marker to map

Currently using MarkerClusterer _and_ MarkerWithLabel just to avoid maintaining code to add a cluster total to an icon.

pretty dumb to use a page of code just to have more than 1 character in the marker. and also having 1 character has not much use.

Come on Google, pull your finger out of your a**e and get this sorted, we want custom length!

One only character as a label marker sounds like a silly joke... It would be rather interesting and very useful to have this working.

[Comment deleted]

[Comment deleted]

How does this even work? Can we submit PR's or something?

PR to delete that restriction

its not useful this single char please upgrade at least to 3 char

Is there anything happening about this?

What about now? Is anything happening? :-)

Found this http://sub1.econym.org.uk/gmap/elabel.htm
Source found here https://github.com/erunyon/ELabel
Not sure still works as no active development

Restriction deleted.

Great! Thanks, Is this already available to use?

It's working in experimental "3.26.10" which is served from https://maps.googleapis.com/maps/api/js
Versioning doc:
https://developers.google.com/maps/documentation/javascript/versions

Thanks for fixing! I'm using this now instead of the lib "Marker With Label".

There is a bug if markers are close. Text appear on top of each other (overlap).

How would one implement this with staticmap?
See example with broken staticmap:
https://jsfiddle.net/0gp101oL/

Static map implementation would be great! I vote for that