Marker

This class extends Base Component.

Adding markers

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

Id and position are required. If an id is not specified, gmaps will autogenerate one.
Copy
myMap.add("marker", {
  id: "myMarker",
  position: {
    lat: 51.178835,
    lng: -1.826240
  }
})

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

Copy
myMap.add("markers", [
  {
    id: "myMarker",
    position: {
      lat: 51.178835,
      lng: -1.826240
    }
  },
  ...
])

Set options

To set a marker'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.markers().setOptions("draggable", true)

// set multiple options
myMap.markers().setOptions({
  draggable: true,
  opacity: 1
})

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.markers().getOptions("opacity")

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

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

Copy
myMap.markers(["myMarker", 43]).getOptions()

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

Get bounds

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

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

// get bounds for single marker
myMap.markers("myMarker").getBounds()

Zoom

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

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

// zoom to single marker
myMap.markers("myMarker").zoom()

Get position

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

Copy
myMap.markers().getPosition()

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

Copy
myMap.markers(["myMarker", 43]).getPosition()

// returns
{
  "myMarker": _.F,  // LatLng representing the marker'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.markers().getPositionString()

// returns
"{"lat":51.178835,"lng":-1.826240}"

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.markers().getPositionString()

// returns
"51.178835,-1.826240"

Methods

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

Method Description
getPosition() Returns the LatLng for the marker's position.
getPositionString() Returns the marker'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.
off(type) Removes all the event listeners for the specified type. You can also pass in all to remove all event listeners.
on(type, function) Adds the specified event listener to the marker.
trigger(type) Triggers the specified event type.

Events

Gmaps simplifies working with events by prodiving an API similar to jQuery. It also uses an internal lookup table to allow for more readable event names.

Copy
// add event
myMap.markers().on("click", function() {
  console.log("You clicked my marker!")
})

// trigger event
myMap.markers().trigger("click")

// remove all events by type
myMap.markers().off("center changed")

// remove all events
myMap.markers().off("all")
Event Alias Description
animation_changed animation changed This event is fired when the marker's animation property changes.
click click This event is fired when the user clicks on the marker.
clickable_changed clickable changed This event is fired when the marker's clickable property changes.
cursor_changed cursor changed This event is fired when the marker's cursor property changes.
dblclick double click This event is fired when the user double-clicks on the marker. Note that the click event will also fire, right before this one.
drag drag This event is repeatedly fired while the user drags the marker.
dragend drag end This event is fired when the user stops dragging the marker.
draggable_changed draggable changed This event is fired when the marker's draggable property changes.
dragstart drag start This event is fired when the user starts dragging the marker.
flat_changed flat changed This event is fired when the marker's flat property changes.
icon_changed icon changed This event is fired when the marker's icon property changes.
mousedown mouse down This event is fired whenever the user's mouse is pressed down over the marker. This will fire before the click event.
mousemove mouse move This event is fired whenever the user's mouse moves over the marker.
mouseout mouse out This event is fired when the user's mouse exits the marker.
mouseover mouse over This event is fired when the user's mouse enters the marker.
mouseup mouse up This event is fired when the user's mouse is released over the marker. This will fire before the click event.
position_changed position changed This event is fired when the marker's position property changes.
rightclick right click This event is fired when the user right clicks the marker.
shape_changed shape changed This event is fired when the marker's shape property changes.
title_changed title changed This event is fired when the marker's title property changes.
visible_changed visible changed This event is fired when the marker's visible property changes.
zindex_changed zindex changed This event is fired when the marker's zIndex property changes.

Options

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

Only gmaps specifc options are listed below. Refer to Google's documentation for a full list of available options.

Option Default Description
position The position of the marker. This can be either a LatLng, LatLngLiteral or a formatted string based on the map's delimitedStrings setting.