Rectangle

This class extends Base Component.

Adding rectangles

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

Id and bounds are required. If an id is not specified, gmaps will autogenerate one.
Copy
myMap.add("rectangle", {
  id: "myRectangle",
  bounds: {
    north: 29.98013,
    south: 29.97818,
    east: 31.13538,
    west: 31.13301
  }
})

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

Copy
myMap.add("rectangles", [
  {
    id: "myRectangle",
    bounds: {
      north: 29.98013,
      south: 29.97818,
      east: 31.13538,
      west: 31.13301
    }
  },
  ...
])

Set options

To set a rectangle'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.rectangles().setOptions("fillColor", "#FF0000")

// set multiple options
myMap.rectangles().setOptions({
  fillColor: "#FF0000",
  fillOpacity: 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.rectangles().getOptions("fillColor")

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

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

Copy
myMap.rectangles(["myRectangle", 43]).getOptions()

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

Get bounds

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

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

// get bounds for single rectangle
myMap.rectangles("myRectangle").getBounds()

Zoom

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

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

// zoom to single rectangle
myMap.rectangles("myRectangle").zoom()

Methods

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

Method Description
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 rectangle.
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.rectangles().on("click", function() {
  console.log("You clicked my rectangle!")
})

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

// remove all events by type
myMap.rectangles().off("double click")

// remove all events
myMap.rectangles().off("all")
Event Alias Description
bounds_changed bounds changed This event is fired when the rectangle's bounds are changed.
click click This event is fired when the user clicks on the rectangle.
dblclick double click This event is fired when the user double-clicks on the rectangle. Note that the click event will also fire, right before this one.
drag drag This event is repeatedly fired while the user drags the rectangle.
dragend drag end This event is fired when the user stops dragging the rectangle.
dragstart drag start This event is fired when the user starts dragging the rectangle.
mousedown mouse down This event is fired whenever the user's mouse is pressed down over the rectangle. This will fire before the click event.
mousemove mouse move This event is fired whenever the user's mouse moves over the rectangle.
mouseout mouse out This event is fired when the user's mouse exits the rectangle.
mouseover mouse over This event is fired when the user's mouse enters the rectangle.
mouseup mouse up This event is fired when the user's mouse is released over the rectangle. This will fire before the click event.
rightclick right click This event is fired when the user right clicks the rectangle.

Options

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

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

Option Default Description
bounds The bounds of the rectangle. This can be either a of LatLngBounds, LatLngBoundsLiterals or a formatted string based on the map's delimitedStrings setting.