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

Question

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.

Limon Monte · Answer 1 · 2017-03-10T12:51:14.330

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>

I added your sugestions. Have done some more experimentation. But I am still having the same problem. The map displays on the first Details display, but any second map display has a blank background. If I scroll past the Grid line, then return, the Background is also blank. I think i need a way to re-paint the Map when it re-enters focus. I was also thknking that perhaps the Google map will not display more than one map on an HTML page at a time to prevent to much traffic. What I think I am looking for is a RepaintOnFocus event ( I made that name up ). — IrishGringo, Mar 10 '17 at 14:23
could you please extract the code demonstrating the issue to jsfiddle/jsbin? — Limon Monte, Mar 11 '17 at 11:05
please put a little bit more effort to your question and make jsfiddle/jsbin, not gist :) — Limon Monte, Mar 13 '17 at 10:10

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

1 Answers1