Circle

This class extends Base Component.

Adding circles

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

Id, center and radius are required. If an id is not specified, gmaps will autogenerate one.
Copy
myMap.add("circle", {
  id: "myCircle",
  center: {
    lat: 38.889480,
    lng: -77.035900
  },
  radius: 80
})

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

Copy
myMap.add("circles", [
  {
    id: 1,
    center: {
      lat: 38.889480,
      lng: -77.035900
    },
    radius: 80
  },
  {
    id: 2,
    center: {
      lat: 38.889480,
      lng: -77.034600
    },
    radius: 80
  }
])

Set options

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

// set multiple options
myMap.circles().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.circles().getOptions("fillColor")

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

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

Copy
myMap.circles(["myCircle", 43]).getOptions()

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

Get bounds

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

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

// get bounds for single circle
myMap.circles("myCircle").getBounds()

Zoom

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

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

// zoom to single circle
myMap.circles("myCircle").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 circle.
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.circles().on("click", function() {
  console.log("You clicked my circle!")
})

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

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

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

Options

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

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

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