MarkerWithLabel extends the Google Maps JavaScript API V3
google.maps.Marker
class.
MarkerWithLabel allows you to define markers with associated labels. As you would expect, if the marker is draggable, so too will be the label. In addition, a marker with a label responds to all mouse events in the same manner as a regular marker. It also fires mouse events and "property changed" events just as a regular marker would. Version 1.1 adds support for the raiseOnDrag feature introduced in API V3.3.
If you drag a marker by its label, you can cancel the drag and return the marker to its
original position by pressing the Esc
key. This doesn't work if you drag the marker
itself because this feature is not (yet) supported in the google.maps.Marker
class.
For a description and examples of how to use this library, check out the how-to.
Constructor | Description |
---|---|
MarkerWithLabel(opt_options?:MarkerWithLabelOptions) |
Creates a MarkerWithLabel with the options specified in MarkerWithLabelOptions . |
This class represents the optional parameter passed to the MarkerWithLabel
constructor.
The properties available are the same as for google.maps.Marker
with the addition
of the properties listed below. To change any of these additional properties after the labeled
marker has been created, call google.maps.Marker.set(propertyName, propertyValue)
.
When any of these properties changes, a property changed event is fired. The names of these
events are derived from the name of the property and are of the form propertyname_changed
.
For example, if the content of the label changes, a labelcontent_changed
event
is fired.
There is no constructor for this class. Instead, this class is instantiated as a javascript object literal.
Properties | Type | Description |
---|---|---|
crossImage |
string |
The URL of the cross image to be displayed while dragging a marker. The default value is "http://maps.gstatic.com/intl/en_us/mapfiles/drag_cross_67_16.png" . |
handCursor |
string |
The URL of the cursor to be displayed while dragging a marker. The default value is "http://maps.gstatic.com/intl/en_us/mapfiles/closedhand_8_8.cur" . |
labelAnchor |
Point |
By default, a label is drawn with its anchor point at (0,0) so
that its top left corner is positioned at the anchor point of the associated marker. Use this
property to change the anchor point of the label. For example, to center a 50px-wide label
beneath a marker, specify a labelAnchor of google.maps.Point(25, 0) .
(Note: x-values increase to the right and y-values increase to the top.) |
labelClass |
string |
The name of the CSS class defining the styles for the label.
Note that style values for position , overflow , top ,
left , zIndex , display , marginLeft , and
marginTop are ignored; these styles are for internal use only. |
labelContent |
string|Node |
The content of the label (plain text or an HTML DOM node). |
labelInBackground |
boolean |
A flag indicating whether a label that overlaps its
associated marker should appear in the background (i.e., in a plane below the marker).
The default is false , which causes the label to appear in the foreground. |
labelStyle |
Object |
An object literal whose properties define specific CSS
style values to be applied to the label. Style values defined here override those that may
be defined in the labelClass style sheet. If this property is changed after the
label has been created, all previously set styles (except those defined in the style sheet)
are removed from the label before the new style values are applied.
Note that style values for position , overflow , top ,
left , zIndex , display , marginLeft , and
marginTop are ignored; these styles are for internal use only. |
labelVisible |
boolean |
A flag indicating whether the label is to be visible.
The default is true . Note that even if labelVisible is
true , the label will not be visible unless the associated marker is also
visible (i.e., unless the marker's visible property is true ). |
optimized |
boolean |
A flag indicating whether rendering is to be optimized for the
marker. Important: The optimized rendering technique is not supported by MarkerWithLabel,
so the value of this parameter is always forced to false . |
raiseOnDrag |
boolean |
A flag indicating whether the label and marker are to be
raised when the marker is dragged. The default is true . If a draggable marker is
being created and a version of Google Maps API earlier than V3.3 is being used, this property
must be set to false . |