Add rectangle component

addon/components/g-map.hbs

@@ -9,6 +9,7 @@
     canvas=Canvas
     marker=(component 'g-map/marker' getContext=(fn this.getComponent))
     circle=(component 'g-map/circle' getContext=(fn this.getComponent))
+    rectangle=(component 'g-map/rectangle' getContext=(fn this.getComponent))
     polyline=(component 'g-map/polyline' getContext=(fn this.getComponent))
     directions=(component 'g-map/directions' getContext=(fn this.getComponent))
     control=(component 'g-map/control' getContext=(fn this.getComponent))

addon/components/g-map/rectangle.js

@@ -0,0 +1,11 @@
+import TypicalMapComponent from './typical-map-component';
+
+export default class Rectangle extends TypicalMapComponent {
+  get name() {
+    return 'rectangles';
+  }
+
+  newMapComponent(options = {}) {
+    return new google.maps.Rectangle(options);
+  }
+}

app/components/g-map/rectangle.js

@@ -0,0 +1 @@
+export { default } from 'ember-google-maps/components/g-map/rectangle';

docs/app/templates/docs/components.hbs

@@ -10,6 +10,7 @@
           <li><LinkTo @route="docs.canvas">canvas</LinkTo></li>
           <li><LinkTo @route="docs.markers">marker</LinkTo></li>
           <li><LinkTo @route="docs.circles">circle</LinkTo></li>
+          <li>rectangle</li>
           <li><LinkTo @route="docs.polylines">polyline</LinkTo></li>
           <li><LinkTo @route="docs.info-windows">infoWindow</LinkTo></li>
           <li><LinkTo @route="docs.controls">control</LinkTo></li>

tests/integration/components/g-map/rectangle-test.js

@@ -0,0 +1,35 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { setupMapTest } from 'ember-google-maps/test-support';
+import { setupLocations } from 'dummy/tests/helpers/locations';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | g-map/rectangle', function (hooks) {
+  setupRenderingTest(hooks);
+  setupMapTest(hooks);
+  setupLocations(hooks);
+
+  test('it renders a rectangle', async function (assert) {
+    await render(hbs`
+      <GMap @lat={{this.lat}} @lng={{this.lng}} as |g|>
+        {{#if this.bounds}}
+          <g.rectangle @bounds={{this.bounds}} />
+        {{/if}}
+      </GMap>
+    `);
+
+    let { map } = await this.waitForMap();
+
+    this.set('bounds', map.getBounds());
+
+    let api = await this.waitForMap();
+    let rectangle = api.components.rectangles[0].mapComponent;
+
+    assert.ok(rectangle, 'rectangle rendered');
+    assert.ok(
+      rectangle.getBounds().equals(map.getBounds()),
+      "rectangle rendered with the map's bounds"
+    );
+  });
+});