From 6e08c077b1cf3252ed7714a90b699ada1797f3bb Mon Sep 17 00:00:00 2001
From: Doug Chestnut <dougchestnut@gmail.com>
Date: Wed, 25 Oct 2017 09:18:10 -0400
Subject: [PATCH 1/3] fixed dom-bind to work in 2.0

---
 demo/kml.html   |  8 +++++---
 demo/polys.html | 22 ++++++++++++----------
 2 files changed, 17 insertions(+), 13 deletions(-)
diff --git a/demo/kml.html b/demo/kml.html
index 0524401..1e213fc 100644
--- a/demo/kml.html
+++ b/demo/kml.html
@@ -21,9 +21,11 @@
 </head>
 <body class="fullbleed">
 
-<template is="dom-bind">
-  <google-map latitude="41.876" longitude="-87.624" zoom="11" kml="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml" api-key="[[apiKey]]"></google-map>
-</template>
+<dom-bind>
+  <template is="dom-bind">
+    <google-map latitude="41.876" longitude="-87.624" zoom="11" kml="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml" api-key="[[apiKey]]"></google-map>
+  </template>
+</dom-bind>
 
 <script>
 if (location.origin === 'https://user-content-dot-custom-elements.appspot.com') {
diff --git a/demo/polys.html b/demo/polys.html
index 8c06ace..01d8faa 100644
--- a/demo/polys.html
+++ b/demo/polys.html
@@ -21,16 +21,18 @@
 </head>
 <body class="fullbleed">
 
-<template is="dom-bind">
-  <google-map latitude="37.779" longitude="-122.3892" min-zoom="9"
-              max-zoom="11" language="en" api-key="[[apiKey]]">
-    <google-map-poly closed fill-color="red" fill-opacity=".25" stroke-weight="1">
-      <google-map-point latitude="37.779" longitude="-122.3892"></google-map-point>
-      <google-map-point latitude="37.804" longitude="-122.2711"></google-map-point>
-      <google-map-point latitude="37.386" longitude="-122.0837"></google-map-point>
-    </google-map-poly>
-  </google-map>
-</template>
+<dom-bind>
+  <template is="dom-bind">
+    <google-map latitude="37.779" longitude="-122.3892" min-zoom="9"
+                max-zoom="11" language="en" api-key="[[apiKey]]">
+      <google-map-poly closed fill-color="red" fill-opacity=".25" stroke-weight="1">
+        <google-map-point latitude="37.779" longitude="-122.3892"></google-map-point>
+        <google-map-point latitude="37.804" longitude="-122.2711"></google-map-point>
+        <google-map-point latitude="37.386" longitude="-122.0837"></google-map-point>
+      </google-map-poly>
+    </google-map>
+  </template>
+</dom-bind>
 
 <button id="toggleEdit" onclick="toggleEdit()">Enable editing</button>
 

From e7404a8932c97cee4daf9e5d3f30dfca15536974 Mon Sep 17 00:00:00 2001
From: Doug Chestnut <dougchestnut@gmail.com>
Date: Wed, 25 Oct 2017 17:20:59 -0400
Subject: [PATCH 2/3] init version of google-map-circle

---
 demo/circle.html       |  50 +++++
 google-map-circle.html | 401 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 451 insertions(+)
 create mode 100644 demo/circle.html
 create mode 100644 google-map-circle.html

diff --git a/demo/circle.html b/demo/circle.html
new file mode 100644
index 0000000..1173e9f
--- /dev/null
+++ b/demo/circle.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>Google Map Circle demo</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../google-map.html">
+  <link rel="import" href="../google-map-circle.html">
+  <style>
+    body {
+      margin: 0;
+      height: 100vh;
+    }
+    #toggleEdit {
+      position: absolute;
+      top: 10px;
+      left: 120px;
+    }
+  </style>
+</head>
+<body class="fullbleed">
+
+<dom-bind>
+  <template is="dom-bind">
+    <google-map latitude="37.779" longitude="-122.3892" min-zoom="9"
+                max-zoom="11" language="en" api-key="[[apiKey]]">
+      <google-map-circle closed fill-color="red" fill-opacity=".25" stroke-weight="1" latitude="37.77493" longitude="-122.41942" radius="20000"></google-map-circle>
+    </google-map>
+  </template>
+</dom-bind>
+
+<button id="toggleEdit" onclick="toggleEdit()">Enable editing</button>
+
+<script>
+  var circle = document.querySelector('google-map-circle');
+  var button = document.querySelector('#toggleEdit');
+
+  function toggleEdit() {
+    circle.editable = !circle.editable;
+    button.innerText = circle.editable ? 'Disable editing' : 'Enable editing';
+  }
+
+  if (location.origin === 'https://user-content-dot-custom-elements.appspot.com') {
+    var t = document.querySelector('template');
+    t.apiKey = 'AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc'; // TODO: update to your own API Key!
+  }
+</script>
+</body>
+</html>
diff --git a/google-map-circle.html b/google-map-circle.html
new file mode 100644
index 0000000..763d4aa
--- /dev/null
+++ b/google-map-circle.html
@@ -0,0 +1,401 @@
+<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../google-apis/google-maps-api.html">
+
+<!--
+The `google-map-circle` element represents a map circle. It is used as a
+child of `google-map`.
+
+<b>Example</b>:
+
+    <google-map latitude="37.77493" longitude="-122.41942">
+      <google-map-circle latitude="37.779" longitude="-122.3892"
+          title="Go Giants!"></google-map-circle>
+    </google-map>
+
+<b>Example</b> - circle with info window (children create the window content):
+
+    <google-map-circle latitude="37.77493" longitude="-122.41942">
+      <img src="image.png">
+    </google-map-circle>
+
+<b>Example</b> - a draggable circle:
+
+    <google-map-circle latitude="37.77493" longitude="-122.41942"
+         draggable="true"></google-map-circle>
+
+<b>Example</b> - hide a circle:
+
+    <google-map-circle latitude="37.77493" longitude="-122.41942"
+        hidden></google-map-circle>
+
+-->
+
+<dom-module id="google-map-circle">
+  <template>
+    <style>
+      :host {
+        display: none;
+      }
+    </style>
+  </template>
+  <script>
+    (function() {
+
+      function setupDragHandler_() {
+        if (this.draggable) {
+          this.dragHandler_ = google.maps.event.addListener(
+              this.circle, 'dragend', onDragEnd_.bind(this));
+        } else {
+          google.maps.event.removeListener(this.dragHandler_);
+          this.dragHandler_ = null;
+        }
+      }
+
+      function onDragEnd_(e, details, sender) {
+        this.latitude = e.latLng.lat();
+        this.longitude = e.latLng.lng();
+      }
+
+      Polymer({
+        is: 'google-map-circle',
+
+        /**
+         * Fired when the circle was clicked. Requires the clickEvents attribute to be true.
+         *
+         * @param {google.maps.MouseEvent} event The mouse event.
+         * @event google-map-circle-click
+         */
+
+        /**
+         * Fired when the circle was double clicked. Requires the clickEvents attribute to be true.
+         *
+         * @param {google.maps.MouseEvent} event The mouse event.
+         * @event google-map-circle-dblclick
+         */
+
+        /**
+         * Fired repeatedly while the user drags the circle. Requires the dragEvents attribute to be true.
+         *
+         * @event google-map-circle-drag
+         */
+
+        /**
+         * Fired when the user stops dragging the circle. Requires the dragEvents attribute to be true.
+         *
+         * @event google-map-circle-dragend
+         */
+
+        /**
+         * Fired when the user starts dragging the circle. Requires the dragEvents attribute to be true.
+         *
+         * @event google-map-circle-dragstart
+         */
+
+        /**
+         * Fired for a mousedown on the circle. Requires the mouseEvents attribute to be true.
+         *
+         * @event google-map-circle-mousedown
+         * @param {google.maps.MouseEvent} event The mouse event.
+         */
+
+        /**
+         * Fired when the DOM `mousemove` event is fired on the circle. Requires the mouseEvents
+         * attribute to be true.
+         *
+         * @event google-map-circle-mousemove
+         * @param {google.maps.MouseEvent} event The mouse event.
+         */
+
+        /**
+         * Fired when the mouse leaves the area of the circle. Requires the mouseEvents attribute to be
+         * true.
+         *
+         * @event google-map-circle-mouseout
+         * @param {google.maps.MouseEvent} event The mouse event.
+         */
+
+        /**
+         * Fired when the mouse enters the area of the circle. Requires the mouseEvents attribute to be
+         * true.
+         *
+         * @event google-map-circle-mouseover
+         * @param {google.maps.MouseEvent} event The mouse event.
+         */
+
+        /**
+         * Fired for a mouseup on the circle. Requires the mouseEvents attribute to be true.
+         *
+         * @event google-map-circle-mouseup
+         * @param {google.maps.MouseEvent} event The mouse event.
+         */
+
+        /**
+         * Fired for a rightclick on the circle. Requires the clickEvents attribute to be true.
+         *
+         * @event google-map-circle-rightclick
+         * @param {google.maps.MouseEvent} event The mouse event.
+         */
+
+        /**
+         * Fired when the close button of the infowindow is pressed.
+         *
+         * @event google-map-circle-close
+         */
+
+        properties: {
+          /**
+           * A Google Maps circle object.
+           *
+           * @type google.maps.Circle
+           */
+          circle: {
+            type: Object,
+            notify: true
+          },
+
+          /**
+           * The Google map object.
+           *
+           * @type google.maps.Map
+           */
+          map: {
+            type: Object,
+            observer: '_mapChanged'
+          },
+
+          /**
+           * A Google Map Infowindow object.
+           *
+           * @type {?Object}
+           */
+          info: {
+            type: Object,
+            value: null
+          },
+
+          /**
+           * When true, circle *click events are automatically registered.
+           */
+          clickEvents: {
+            type: Boolean,
+            value: false,
+            observer: '_clickEventsChanged'
+          },
+
+          /**
+           * When true, circle drag* events are automatically registered.
+           */
+          dragEvents: {
+            type: Boolean,
+            value: false,
+            observer: '_dragEventsChanged'
+          },
+
+
+          /**
+           * When true, circle mouse* events are automatically registered.
+           */
+          mouseEvents: {
+            type: Boolean,
+            value: false,
+            observer: '_mouseEventsChanged'
+          },
+
+          /**
+           * Z-index for the circle.
+           */
+          zIndex: {
+            type: Number,
+            value: 0,
+            observer: '_zIndexChanged'
+          },
+
+          /**
+           * The circle's longitude coordinate.
+           */
+          longitude: {
+            type: Number,
+            value: null,
+            notify: true
+          },
+
+          /**
+           * The circle's latitude coordinate.
+           */
+          latitude: {
+            type: Number,
+            value: null,
+            notify: true
+          },
+
+          /**
+           * The circle's radius in meters
+           */
+          radius: {
+            type: Number,
+            value: null,
+            notify: true
+          }
+        },
+
+        observers: [
+          '_updateCenter(latitude, longitude)',
+          '_updateRadius(radius)'
+        ],
+
+        detached: function() {
+          if (this.circle) {
+            google.maps.event.clearInstanceListeners(this.circle);
+            this._listeners = {};
+            this.circle.setMap(null);
+          }
+          if (this._contentObserver)
+            this._contentObserver.disconnect();
+        },
+
+        attached: function() {
+          // If element is added back to DOM, put it back on the map.
+          if (this.circle) {
+            this.circle.setMap(this.map);
+          }
+        },
+
+        _updateCenter: function() {
+          if (this.circle && this.latitude != null && this.longitude != null) {
+            this.circle.setCenter(new google.maps.LatLng(
+              parseFloat(this.latitude), parseFloat(this.longitude)));
+              console.log('center');
+          }
+        },
+
+        _updateRadius: function(){
+          if (this.circle && this.radius != null) {
+            this.circle.setRadius(this.radius);
+            console.log('radius');
+          }
+        },
+
+        _clickEventsChanged: function() {
+          if (this.map) {
+            if (this.clickEvents) {
+              this._forwardEvent('click');
+              this._forwardEvent('dblclick');
+              this._forwardEvent('rightclick');
+            } else {
+              this._clearListener('click');
+              this._clearListener('dblclick');
+              this._clearListener('rightclick');
+            }
+          }
+        },
+
+        _dragEventsChanged: function() {
+          if (this.map) {
+            if (this.dragEvents) {
+              this._forwardEvent('drag');
+              this._forwardEvent('dragend');
+              this._forwardEvent('dragstart');
+            } else {
+              this._clearListener('drag');
+              this._clearListener('dragend');
+              this._clearListener('dragstart');
+            }
+          }
+        },
+
+        _mouseEventsChanged: function() {
+          if (this.map) {
+            if (this.mouseEvents) {
+              this._forwardEvent('mousedown');
+              this._forwardEvent('mousemove');
+              this._forwardEvent('mouseout');
+              this._forwardEvent('mouseover');
+              this._forwardEvent('mouseup');
+            } else {
+              this._clearListener('mousedown');
+              this._clearListener('mousemove');
+              this._clearListener('mouseout');
+              this._clearListener('mouseover');
+              this._clearListener('mouseup');
+            }
+          }
+        },
+
+        _zIndexChanged: function() {
+          if (this.circle) {
+            this.circle.setZIndex(this.zIndex);
+          }
+        },
+
+        _mapChanged: function() {
+          // Circle will be rebuilt, so disconnect existing one from old map and listeners.
+          if (this.circle) {
+            this.circle.setMap(null);
+            google.maps.event.clearInstanceListeners(this.circle);
+          }
+
+          if (this.map && this.map instanceof google.maps.Map) {
+            this._mapReady();
+          }
+        },
+
+        _mapReady: function() {
+          this._listeners = {};
+          this.circle = new google.maps.Circle({
+            map: this.map,
+            center: {
+              lat: parseFloat(this.latitude),
+              lng: parseFloat(this.longitude)
+            },
+            title: this.title,
+//            animation: google.maps.Animation[this.animation],
+            draggable: this.draggable,
+            visible: !this.hidden,
+            zIndex: this.zIndex,
+            radius: this.radius
+          });
+          this._clickEventsChanged();
+          this._dragEventsChanged();
+          this._mouseEventsChanged();
+          setupDragHandler_.bind(this)();
+        },
+
+        _clearListener: function(name) {
+          if (this._listeners[name]) {
+            google.maps.event.removeListener(this._listeners[name]);
+            this._listeners[name] = null;
+          }
+        },
+
+        _forwardEvent: function(name) {
+          this._listeners[name] = google.maps.event.addListener(this.circle, name, function(event) {
+            this.fire('google-map-circle-' + name, event);
+          }.bind(this));
+        },
+
+        attributeChanged: function(attrName) {
+          if (!this.circle) {
+            return;
+          }
+
+          // Cannot use *Changed watchers for native properties.
+          switch (attrName) {
+            case 'hidden':
+              this.circle.setVisible(!this.hidden);
+              break;
+            case 'draggable':
+              this.circle.setDraggable(this.draggable);
+              setupDragHandler_.bind(this)();
+              break;
+            case 'title':
+              this.circle.setTitle(this.title);
+              break;
+          }
+        }
+      });
+
+    })();
+  </script>
+</dom-module>

From e776fb83fcce0679987ac93603e332d9b60aa38a Mon Sep 17 00:00:00 2001
From: Doug Chestnut <dougchestnut@gmail.com>
Date: Mon, 27 Nov 2017 11:06:18 -0500
Subject: [PATCH 3/3] added demo link and added circle to tlement docs

---
 google-map-circle.html   | 2 +-
 google-map-elements.html | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/google-map-circle.html b/google-map-circle.html
index 763d4aa..9b317db 100644
--- a/google-map-circle.html
+++ b/google-map-circle.html
@@ -30,6 +30,7 @@
     <google-map-circle latitude="37.77493" longitude="-122.41942"
         hidden></google-map-circle>
 
+@demo demo/circle.html
 -->
 
 <dom-module id="google-map-circle">
@@ -350,7 +351,6 @@
               lng: parseFloat(this.longitude)
             },
             title: this.title,
-//            animation: google.maps.Animation[this.animation],
             draggable: this.draggable,
             visible: !this.hidden,
             zIndex: this.zIndex,
diff --git a/google-map-elements.html b/google-map-elements.html
index 3b372a9..ec24752 100644
--- a/google-map-elements.html
+++ b/google-map-elements.html
@@ -4,3 +4,4 @@
 <link rel="import" href="google-map-search.html">
 <link rel="import" href="google-map-point.html">
 <link rel="import" href="google-map-poly.html">
+<link rel="import" href="google-map-circle.html">
