Полимер vaadin подробнее google map, как обновить карту после прокрутки

Question

Это вопрос Polymer 1.0, Vaadin-grid 2.0dev и вопрос о Google Maps. У меня есть карта Google в Vaadin-grid-detail

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

Карта отображается отлично. Однако при прокрутке мимо раздела сведений, а затем обратно к карте раздел карты отключается. Не перекрашивается. Есть ли способ сделать недействительной или перекрасить область карты, когда она снова появится в поле зрения? Я бы предположил, что перекраска должна произойти автоматически.

Answer 1

Вот пример использования google-map компонент внутри vaadin-grid#alpha4, все отлично работает без дополнительных перекрашиваний:

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