ポリマーvaadin詳細Googleマップ、スクロール後の地図をリフレッシュする方法

Question

これはPolymer 1.0、Vaadinグリッドの詳細2.0devとGoogle Mapsの質問です。 は、私は完全に

<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> 

Vaadinグリッド-詳細に地図表示をグーグルマップを持っています。 しかし、詳細セクションをスクロールしてからマップに戻すと、マップセクションは空白になります。再塗りしません。 マップ領域が表示に戻ったときに無効化または再描画する方法はありますか？ 私は再描画が自動的に起こるはずだと思います。ここで

Answer 1

がvaadin-grid#alpha4内google-mapコンポーネントを使用した例ですが、すべてが追加再描画することなく、正常に動作します：

<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>