Chaining

Using gmap3 creates a chaining which allows to use the whole API. To get back in jQuery chaining, simply use the $ key. 

$('#map')
  .gmap3({
    address: "Haltern am See, Weseler Str. 151",
    zoom: 6,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  })
  .marker(function (map) {
    return {
      position: map.getCenter(),
      icon: 'https://maps.google.com/mapfiles/marker_green.png'
    };
  })
  .then(function (marker) {
    console.log(marker);
  })
  .on('click', function (marker, event) {
    marker.setIcon('https://maps.google.com/mapfiles/marker_orange.png');
    setTimeout(function () {
      marker.setIcon('https://maps.google.com/mapfiles/marker_green.png');
    }, 200);
  })
  .$ // back to jQuery chaining
  .css(...)

Chaining function

Each time, the api accepts either an object or a function which return the object. 

var center = [37.772323, -122.214897];
$('#map')
  // Object passed
  .gmap3({
    center: center,
    zoom: 13,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  })
  // Function passed
  .circle(function (map) {
    return {
      center: map.getCenter(),
      radius : 750,
      fillColor : "#FFAF9F",
      strokeColor : "#FF512F"
    };
  })
  // Object passed
  .circle({
    center: center,
    radius : 750,
    fillColor : "#FFAF9F",
    strokeColor : "#FF512F"
  });

Chaining context

When a function is passed in the chaining, it takes one parameters which is the previous result and its context provides two things, the $ and the get handlers.

$

this.$ is the current jQuery handler.

get

this.get allows in each function to retrieve any result from a previous chain.

If not provided, returns all previous results as an array.
If >= 0, returns the index result from the beginning which may be a single element or an array when the chained function creates many elements.
If < 0, same as positive one, but from the end.

Example

var center = [37.772323, -122.214897];
$('#map')
  .gmap3({
    center: center,
    zoom: 13,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  })
  .circle({
    center: center,
    radius : 750,
    fillColor : "#FFAF9F",
    strokeColor : "#FF512F"
  })
  .circle({
    center: center,
    radius : 100,
    fillColor : "#99EE9F",
    strokeColor : "#FF512F"
  })
  .then(function (result) {
    console.log(result);      // returns the last circle
    console.log(this.$);      // returns $('#map')

    // No index: all object into an array
    console.log(this.get());

    // Positive index: from the beginning
    console.log(this.get(0)); // returns the map (google map object)
    console.log(this.get(1)); // returns the first circle
    console.log(this.get(2)); // returns the second circle

    // Negative index: from the end
    console.log(this.get(-1)); // returns the second circle
    console.log(this.get(-2)); // returns the first circle
    console.log(this.get(-3)); // returns the map (google map object)
  });