Polyline

This class extends Base Component.

Adding polylines

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

Id and path are required. If an id is not specified, gmaps will autogenerate one.
Copy
myMap.add("polyline", {
  id: "myPolyline",
  path: [
    { lat: 26.141478, lng: 32.669904 },
    { lat: 48.892570, lng: 2.235883 }
  ]
})

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

Copy
myMap.add("polylines", [
  {
    id: "myPolyline",
    path: [
      { lat: 26.141478, lng: 32.669904 },
      { lat: 48.892570, lng: 2.235883 }
    ]
  },
  ...
])

Set options

To set a polyline'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.polylines().setOptions("strokeColor", "#FFF")

// set multiple options
myMap.polylines().setOptions({
  strokeColor: "#FFF",
  strokeOpacity: 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.polylines().getOptions("strokeColor")

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

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

Copy
myMap.polylines(["myPolyline", 43]).getOptions()

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

Get bounds

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

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

// get bounds for single polyline
myMap.polylines("myPolyline").getBounds()

Zoom

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

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

// zoom to single polyline
myMap.polylines("myPolyline").zoom()

Get path

The getPath method will return the polyline's path property.

Copy
myMap.polylines().getPath()

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

Copy
myMap.polylines(["myPolyline", 43]).getPath()

// returns
{
  "myPolyline": _.gd,  // MVCArray representing the polyline'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.polylines().getPathString()

// returns
"[{"lat":26.14148,"lng":32.6699},{"lat":48.89257,"lng":2.23588}]"

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

// returns
"26.14148,32.6699|48.89257,2.23588"

Methods

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

Method Description
getPath() Returns the polyline's path.
getPathString() Returns the polyline's path 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 polyline.
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.polylines().on("click", function() {
  console.log("You clicked my polyline!")
})

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

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

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

Options

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

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

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