CODEWITHSUNDEEP
google-mapspolymervaadinvaadin-gridvaadin-elements
IrishGringo
IrishGringo

Reputation: 4054

polymer vaadin details google map, how to refresh map after scroll

This is a Polymer 1.0, Vaadin-grid details 2.0dev and Google Maps question. I have a google map in a 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>

The map display perfectly. However, when scrolling past the detail section, then back to the map, the Map section is blanked out. Does not repaint. Is there a way to invalidate or repaint the map area when it comes back into view? I would assume that the repaint should happen automatically.

Upvotes: 1

Views: 149

Answers (1)

Limon Monte
Limon Monte

Reputation: 54419

Here's the example of using the google-map component inside the vaadin-grid#alpha4, all works fine without additional repaints:

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

Upvotes: 1

Related Questions