Polygon

This class extends Base Component.

Adding polygons

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

Id and paths are required. If an id is not specified, gmaps will autogenerate one.
Copy
myMap.add("polygon", {
  id: "myPolygon",
  paths: [
    { lat: 25.774, lng: -80.190 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 }
  ]
})

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

Copy
myMap.add("polygons", [
  {
    id: "myPolygon",
    paths: [
      { lat: 25.774, lng: -80.190 },
      { lat: 18.466, lng: -66.118 },
      { lat: 32.321, lng: -64.757 }
    ]
  },
  ...
])

Set options

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

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

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

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

Copy
myMap.polygons(["myPolygon", 43]).getOptions()

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

Get bounds

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

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

// get bounds for single polygon
myMap.polygons("myPolygon").getBounds()

Zoom

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

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

// zoom to single polygon
myMap.polygons("myPolygon").zoom()

Get path

The getPath method will return the polygon's paths property. To get a specific path, pass in the index as a parameter.

Copy
myMap.polygons().getPath()

// get only the first path
myMap.polygons().getPath(0)

If the getPath method is called on a PolygonArray containing multiple polygons, the return value will be formatted as an object using the ids as the key.

Copy
myMap.polygons(["myPolygon", 43]).getPath()

// returns
{
  "myPolygon": _.gd,  // MVCArray representing the polygon's path
  "43": _.gd
}

Get path string

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

By default, strings will be in JSON format.
Copy
myMap.polygons().getPathString()

// returns
"[[{"lat":25.774,"lng":-80.190},{"lat":18.466,"lng":-66.118}, ..."

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.polygons().getPathString()

// returns
"25.774,-80.190|18.466,-66.118| ..."

Methods

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

Method Description
getPath(index) Returns the polygon's paths. You can optionally supply an index to specify which path.
getPathString(index) Returns the polygon's paths 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. You can optinally supply an index to specify which path.
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 polygon.
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.polygons().on("click", function() {
  console.log("You clicked my polygon!")
})

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

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

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

Options

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

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

Option Default Description
paths The paths of the polygon. This can be either an array of LatLngs, LatLngLiterals or a formatted string based on the map's delimitedStrings setting.