At present the script requires the core map code to be already present in the page which prevents asynchronous loading of maps whilst using the MapLabel function.

https://github.com/googlemaps/js-map-label/blob/gh-pages/src/maplabel.js#L44

It would be better, in my opinion, if the prototypical properties were copied from OverlayView on first
instance of the constructor getting initialised. That would allow someone to asynchronously load the map script and instantiate inheritance when calling new MapLabel for the first time.

function MapLabel(opt_options) {

    if (!MapLabel.prototype.setValues) {
        // Copy the properties over.
        for (var prop in google.maps.OverlayView.prototype) {
            MapLabel.prototype[prop] = google.maps.OverlayView.prototype[prop];
        }
    }

    this.set('fontFamily', 'sans-serif');
    this.set('fontSize', 12);
    this.set('fontColor', '#000000');
    this.set('strokeWeight', 4);
    this.set('strokeColor', '#ffffff');
    this.set('align', 'center');

    this.set('zIndex', 1e3);

    this.setValues(opt_options);
}

To get multiline support, add this:

MapLabel.prototype.wrapText = function(context, text, x, y, maxWidth, lineHeight) {
  var words = text.split(' ');
  var line = '';

  for(var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
      context.strokeText(line, x, y);
      context.fillText(line, x, y);

      line = words[n] + ' ';
      y += lineHeight;
    }
    else {
      line = testLine;
    }
  }
  context.strokeText(line, x, y);
  context.fillText(line, x, y);
};

In drawCanvas_, change

    if (strokeWeight) {
      ctx.lineWidth = strokeWeight;
      ctx.strokeText(text, strokeWeight, strokeWeight);
    }

    ctx.fillText(text, strokeWeight, strokeWeight);

to

    if (strokeWeight) {
      ctx.lineWidth = strokeWeight;

    }

    this.wrapText(ctx, text, strokeWeight, strokeWeight, *ADD MAX WIDTH*, *ADD LINEHEIGHT*);
    //e.g.  this.wrapText(ctx, text, strokeWeight, strokeWeight, 200, 14);

This code is an extension of:
http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/

Is there any way to rotate a map label?

Hi,

How do I position the label above my marker?

Thanks.

If you add this lines to MapLabel.prototype.onAdd

canvas.width = 500;
canvas.height = 500;
canvas.style.width = "250px";
canvas.style.height = "250px";

You can support hi-res displays. Otherwise the labels look blurry.

js-map-label is already installed why I got that message

This dependency was not found:

• js-map-label in .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/views/search/Se
  archMap.vue

To install it, you can run: npm install --save js-map-label

how to change icon with js-map-label is there any example to do this?

Hi guys,
First of all thanks for implementing this almost the moment where I actually needed it ;)

Unfortunately the canvas seems to be fixed size with a width of 300px. This means, that bigger labels might not fit into the canvas and simply get cut off (no wrapping -.-)

Could we at least have an option to control the width?

Or, as I fixed it for now, set the canvas.width to 1000px. For labels which are centered, the works just fine.

Thanks
M

It seems that there are differences between git repository (this) and googlecode repository.

I'd noticed the difference by the difference between the labeled marker object name in both repositories (googlecode repository - MarkerWithLabel, git repository - MapLabel).
Also, there is a difference in the object interaction with the map (googlecode repository - Constructing MarkerWithLabel object instead of google.maps.Marker object, git repository - bind constructed google.maps.Marker object to constructed MapLabel object).

I would really like to know who is the newest and most supported by the contributors, are they providing the same solution to the users marker requirements?

Thank you.

I want to remove label from google map same as we remove marker from google map like marker.setMap(null). Thank you.