polymère vaadin détails carte google, comment actualiser la carte après le défilement

Question

Ceci est un Polymer 1.0, Vaadin-grille détails 2.0dev et question Google Maps. J'ai une carte Google dans un Vaadin-grille détail

<vaadin-grid id="grid-row-details" items="[[bindata]]" size="200"> 

    <template class="row-details"> 
     <div class="details"> 
     <!--<img src="[[item.user.picture.large]]">--> 

<div style="width: 60%; height: 50%; background-color: blue; float:right;"> 
<google-map 
     latitude=[[item.ValLat]] 
     longitude=[[item.ValLong]] 
     fit-to-marker 
     api-key="AIzaasasasasb-Z7easasbhl_dy8DCXuIuDDRc"> 
      <google-map-marker 
       latitude=[[item.ValLat]] 
       longitude=[[item.ValLong]] 
       draggable="true" 
       zoom="20"> 
      </google-map-marker> 
</google-map> 
</div> 
<div style="width: 40%; height: 50%; background-color: grey; float:left;"> 
       <p>Hi! My name is [[item.$key]]!</p> 
       <p>BIN WEEK NUMBER = [[item.BinScanWeekNumber]] </p> 
</div> 
     </div> 
    </template> 

L'affichage de la carte parfaitement. Toutefois, lorsque vous faites défiler la section Détail, puis revenez à la carte, la section Carte est masquée. Ne pas repeindre. Existe-t-il un moyen d'invalider ou de repeindre la zone de la carte lorsqu'elle est à nouveau visible? Je suppose que la repeinte devrait se produire automatiquement.

Answer 1

Voici l'exemple de l'utilisation du composant google-map à l'intérieur du vaadin-grid#alpha4, tout fonctionne très bien sans repaints supplémentaires:

<base href="https://polygit.org/vaadin-grid+vaadin+v2.0.0-alpha4/google-map+GoogleWebComponents+1.2.0/polymer+polymer+v1.7.0/components/"> 
 

 
<link rel="import" href="vaadin-grid/vaadin-grid.html"> 
 
<link rel="import" href="google-map/google-map.html"> 
 

 
<vaadin-grid-google-map></vaadin-grid-google-map> 
 

 
<dom-module id="vaadin-grid-google-map"> 
 
    <template> 
 
    
 
    <vaadin-grid id="grid" items="[[items]]" on-active-item-changed="_onActiveItemChanged"> 
 
     
 
     <template class="row-details"> 
 
     <div style="width: 100%; height: 200px;"> 
 
      <google-map fit-to-marker api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc"> 
 
      <google-map-marker latitude="37.78" longitude="-122.4" draggable="true"></google-map-marker> 
 
      </google-map> 
 
     </div> 
 
     </template> 
 
    
 
     <vaadin-grid-column> 
 
     <template>[[item]]</template> 
 
     </vaadin-grid-column> 
 

 
    </vaadin-grid> 
 
    
 
    </template> 
 

 
    <script> 
 
    Polymer({ 
 
     is: 'vaadin-grid-google-map', 
 

 
     ready: function() { 
 
     this.items = [...Array(20).keys()] 
 
     }, 
 

 
     properties: { 
 
     items: { 
 
      type: Array 
 
     } 
 
     }, 
 
     
 
     _onActiveItemChanged: function(e) { 
 
     this.$.grid.expandedItems = [e.detail.value]; 
 
     }  
 
    }) 
 
    </script> 
 
</dom-module>