Label

This class extends Base Component.

Adding labels

To add labels to the map, pass in "label" and the desired options to the add method. All default options can be overwritten by passing in an object.

Id, position and text are required. If an id is not specified, gmaps will autogenerate one.
Copy
myMap.add("label", {
  id: "myLabel",
  position: {
    lat: 37.5,
    lng: -120
  },
  text: "myLabel"
})

To add multiple labels at once, you can pass in an array of options as the second parameter.

Copy
myMap.add("labels", [
  {
    id: "myLabel",
    position: {
      lat: 37.5,
      lng: -120
    },
    text: "myLabel"
  },
  ...
])

Set options

To set a label's options after initialization, specify the option name and value. You can set multiple options at once by passing in an object as the only parameter.

Copy
// set single option
myMap.labels().setOptions("fontColor", "#FF0000")

// set multiple options
myMap.labels().setOptions({
  fontColor: "#FF0000",
  fontSize: 16
})

Get options

To get the value of a specifc option, pass in the option name. If you do not supply an option name, all the options will be returned in an object.

Copy
// get single option
myMap.labels().getOptions("fontColor")

// get all options
myMap.labels().getOptions()

If the getOptions method is called on a LabelArray containing multiple labels, the return value will be formatted as an object using the ids as the key.

Copy
myMap.labels(["myLabel", 43]).getOptions()

// returns
{
  "myLabel": { ... },  // An object containing all the label's options
  "43": { ... }
}

Get bounds

When the getBounds method is called on a LabelArray, it will return a LatLngBounds containing all the labels within the array.

Copy
// get bounds for all labels
myMap.labels().getBounds()

// get bounds for single label
myMap.labels("myLabel").getBounds()

Zoom

The zoom method will calculate the bounds and automatically set the map's viewport to it.

Copy
// zoom to all labels
myMap.labels().zoom()

// zoom to single label
myMap.labels("myLabel").zoom()

Get position

The getPosition method will return the label's position property.

Copy
myMap.labels().getPosition()

If the getPosition method is called on a LabelArray containing multiple labels, the return value will be formatted as an object using the ids as the key.

Copy
myMap.labels(["myLabel", 43]).getPosition()

// returns
{
  "myLabel": _.F,  // LatLng representing the label's position
  "43": _.F
}

Get position string

The getPositionString method works the same as getPosition except the return value is a formatted string based on the map's settings.

By default, strings will be in JSON format.
Copy
myMap.labels().getPositionString()

// returns
"{"lat":37.5,"lng":-120}"

If the map's delimitedStrings setting is true, strings will be formatted using the map's delimiter settings.

The default options are set at gmap.settings.delimiter.

Copy
myMap.settings.delimitedStrings = true
myMap.labels().getPositionString()

// returns
"37.5,-120"

Methods

Inherits all the methods from the Base Component class. Only additional methods are listed below:

Method Description
getPosition() Returns the LatLng for the labels's position.
getPositionString() Returns the labels's position in a formatted string. If the delimitedStrings setting is false, it will return a string in JSON format; otherwise it will return a delimited string.

Events

Lables are custom components that don't exist in native Google Maps. Therefore events are not supported.

Options

The default options are set at gmap.settings.labelOptions.

Option Default Description
align center The horizontal text alignment. Options are left, right or center.
fontFamily sans-serif The font family.
fontSize 14 The font size in pixels.
fontColor #000 The font color. All CSS3 colors are supported.
maxZoom The maximum zoom level this label should be shown at.
minZoom The minimum zoom level this label should be shown at.
position The position of the label. This can be either a LatLng, LatLngLiteral or a formatted string based on the map's delimitedStrings setting.
strokeColor #FFF The stroke color. All CSS3 colors are supported.
strokeWeight 1 The stroke width in pixels.
text The label's text.
visible true If the label is visible or not.
zIndex The zIndex of the label.