From b9ff87ae586535cf65139fb7c5a845aa9395a8e1 Mon Sep 17 00:00:00 2001
From: kimagure44 <kimagure44@yahoo.es>
Date: Thu, 2 Aug 2018 16:42:10 +0200
Subject: [PATCH] attribute native hidden and title in Polymer 2

          Solved the failure in polymer 2 with the hidden attribute.
           When you use the Google Maps component in Polymer 2 the hidden attribute is not working as in Polymer 1,
           it only works the first time.
           It seems that with the native attributes of html 'hidden', 'title', etc ... in polymer 2 in this
           component they do not react to the change.I have reviewed the 'attributeChanged' method and it
           appears as deprecated and according to the official documentation they recommend using
           the 'attributeChangedCallback' method, but it behaves the same with the native attributes.
           I imagine that since they are native attributes they have a behavior that in polymer 1 if it worked
           but in polymer 2 it does not do in binding.
           Solution: The first solution was to create a property that would replace the behavior of the hidden
           or the title, but the final solution is much simpler. You have to declare the native
           attributes 'hidden' or 'title' as properties of the component, in this way Native attributes
           work correctly
---
 google-map-marker.html | 67 ++++++++++++++++++++++++++----------------
 1 file changed, 42 insertions(+), 25 deletions(-)

diff --git a/google-map-marker.html b/google-map-marker.html
index 1900fa3..8b31d49 100644
--- a/google-map-marker.html
+++ b/google-map-marker.html
@@ -43,7 +43,7 @@
     <slot></slot>
   </template>
   <script>
-    (function() {
+    (function () {
 
 
       /**
@@ -53,7 +53,7 @@
       function setupDragHandler_() {
         if (this.draggable) {
           this.dragHandler_ = google.maps.event.addListener(
-              this.marker, 'dragend', onDragEnd_.bind(this));
+            this.marker, 'dragend', onDragEnd_.bind(this));
         } else {
           google.maps.event.removeListener(this.dragHandler_);
           this.dragHandler_ = null;
@@ -162,6 +162,23 @@
          */
 
         properties: {
+          /**
+           Solved the failure in polymer 2 with the hidden attribute. 
+           When you use the Google Maps component in Polymer 2 the hidden attribute is not working as in Polymer 1, 
+           it only works the first time. 
+           It seems that with the native attributes of html 'hidden', 'title', etc ... in polymer 2 in this 
+           component they do not react to the change.I have reviewed the 'attributeChanged' method and it 
+           appears as deprecated and according to the official documentation they recommend using 
+           the 'attributeChangedCallback' method, but it behaves the same with the native attributes.
+           I imagine that since they are native attributes they have a behavior that in polymer 1 if it worked 
+           but in polymer 2 it does not do in binding.
+           Solution: The first solution was to create a property that would replace the behavior of the hidden 
+           or the title, but the final solution is much simpler. You have to declare the native 
+           attributes 'hidden' or 'title' as properties of the component, in this way Native attributes 
+           work correctly   
+          */
+          hidden: Boolean,
+          title: String,
           /**
            * A Google Maps marker object.
            *
@@ -290,7 +307,7 @@
           '_updatePosition(latitude, longitude)'
         ],
 
-        detached: function() {
+        detached: function () {
           if (this.marker) {
             google.maps.event.clearInstanceListeners(this.marker);
             this._listeners = {};
@@ -300,21 +317,20 @@
             this._contentObserver.disconnect();
         },
 
-        attached: function() {
+        attached: function () {
           // If element is added back to DOM, put it back on the map.
           if (this.marker) {
             this.marker.setMap(this.map);
           }
         },
-
-        _updatePosition: function() {
+        _updatePosition: function () {
           if (this.marker && this.latitude != null && this.longitude != null) {
             this.marker.setPosition(new google.maps.LatLng(
               parseFloat(this.latitude), parseFloat(this.longitude)));
           }
         },
 
-        _clickEventsChanged: function() {
+        _clickEventsChanged: function () {
           if (this.map) {
             if (this.clickEvents) {
               this._forwardEvent('click');
@@ -328,7 +344,7 @@
           }
         },
 
-        _dragEventsChanged: function() {
+        _dragEventsChanged: function () {
           if (this.map) {
             if (this.dragEvents) {
               this._forwardEvent('drag');
@@ -342,7 +358,7 @@
           }
         },
 
-        _mouseEventsChanged: function() {
+        _mouseEventsChanged: function () {
           if (this.map) {
             if (this.mouseEvents) {
               this._forwardEvent('mousedown');
@@ -360,31 +376,31 @@
           }
         },
 
-        _animationChanged: function() {
+        _animationChanged: function () {
           if (this.marker) {
             this.marker.setAnimation(google.maps.Animation[this.animation]);
           }
         },
 
-        _labelChanged: function() {
+        _labelChanged: function () {
           if (this.marker) {
             this.marker.setLabel(this.label);
           }
         },
 
-        _iconChanged: function() {
+        _iconChanged: function () {
           if (this.marker) {
             this.marker.setIcon(this.icon);
           }
         },
 
-        _zIndexChanged: function() {
+        _zIndexChanged: function () {
           if (this.marker) {
             this.marker.setZIndex(this.zIndex);
           }
         },
 
-        _mapChanged: function() {
+        _mapChanged: function () {
           // Marker will be rebuilt, so disconnect existing one from old map and listeners.
           if (this.marker) {
             this.marker.setMap(null);
@@ -396,12 +412,12 @@
           }
         },
 
-        _contentChanged: function() {
+        _contentChanged: function () {
           if (this._contentObserver)
             this._contentObserver.disconnect();
           // Watch for future updates.
-          this._contentObserver = new MutationObserver( this._contentChanged.bind(this));
-          this._contentObserver.observe( this, {
+          this._contentObserver = new MutationObserver(this._contentChanged.bind(this));
+          this._contentObserver.observe(this, {
             childList: true,
             subtree: true
           });
@@ -411,11 +427,11 @@
             if (!this.info) {
               // Create a new infowindow
               this.info = new google.maps.InfoWindow();
-              this.openInfoHandler_ = google.maps.event.addListener(this.marker, 'click', function() {
+              this.openInfoHandler_ = google.maps.event.addListener(this.marker, 'click', function () {
                 this.open = true;
               }.bind(this));
 
-              this.closeInfoHandler_ = google.maps.event.addListener(this.info, 'closeclick', function() {
+              this.closeInfoHandler_ = google.maps.event.addListener(this.info, 'closeclick', function () {
                 this.open = false;
               }.bind(this));
             }
@@ -430,7 +446,7 @@
           }
         },
 
-        _openChanged: function() {
+        _openChanged: function () {
           if (this.info) {
             if (this.open) {
               this.info.open(this.map, this.marker);
@@ -442,7 +458,7 @@
           }
         },
 
-        _mapReady: function() {
+        _mapReady: function () {
           this._listeners = {};
           this.marker = new google.maps.Marker({
             map: this.map,
@@ -466,20 +482,21 @@
           setupDragHandler_.bind(this)();
         },
 
-        _clearListener: function(name) {
+        _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.marker, name, function(event) {
+        _forwardEvent: function (name) {
+          this._listeners[name] = google.maps.event.addListener(this.marker, name, function (event) {
             this.fire('google-map-marker-' + name, event);
           }.bind(this));
         },
 
-        attributeChanged: function(attrName) {
+        attributeChanged: function (attrName) {
+          debugger;
           if (!this.marker) {
             return;
           }