Google map does not refresh after scroll event in VAADIN GRID DETAILS

gistfile1.txt

<!--
On initial Display, the SHow Details click event shows a goog map.  Background and markers.
But after scrolling out of Grid details, then back in... or opening up a new Grid Detail...
The background blanks out but marker remains.
THus I suspect there needs to be a redraw/ invalidate event for when the map is viewed.
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view9">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }

      google-map {
        height: 600px;
      }

    </style>


        <firebase-query
            id="query"
            app-name="SHOE33"
            path="/BIN"
            data="{{bindata}}">
        </firebase-query>

        <div class="card">
          <div class="circle">2</div>
          <h1>BIN LAST SCAN</h1>
          <p> Total Bins =  [[bindata.length]] </p>
        </div>


      <vaadin-grid id="grid-row-details" items="[[bindata]]" size="200" on-active-item-changed="_onActiveItemChanged">
              <template class="row-details">
                  <div class="card">
                    <!--<div class="details">-->
                        <div  style="width: 60%; 
                              height: 50%; 
                              background-color: whitesmoke; 
                              float:right;">
                              <google-map 
                                  latitude=[[item.ValLat]] 
                                  longitude=[[item.ValLong]]   
                                  fit-to-marker 
                                  api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc">
                                    <google-map-marker 
                                        latitude=[[item.ValLat]] 
                                        longitude=[[item.ValLong]] 
                                        draggable="true"
                                        zoom="20">
                                    </google-map-marker>
                              </google-map>
                              <span>  WIll put something here...  not sure what yet.  Perhaps a History of Bin</span>
                        </div>

                        <div style="width: 40%; 
                            height: 50%; 
                            float:left;">
                              <p> DETAILS</p>
                              <p>BIN ID [[item.$key]]!</p>
                              <p>BIN WEEK NUMBER = [[item.BinScanWeekNumber]] </p>
                              <p>BIN Driver Initials = [[item.DriversInitials]] </p>
                              <p>BIN Mission ID = [[item.MissionID]] </p>
                              <p>BIN FILL = [[item.Q10_FILL_LEVEL]] </p>
                              <p>BIN STATUS = [[item.Q20_BIN_STATUS]] </p>
                              <!--<p>BIN LAT = [[item.ValLat]] </p>-->
                              <!--<p>BIN LONG = [[item.ValLong]] </p>-->
                              <p>BIN YEAR = [[item.YearNumber]] </p>
                              <!--<p>BIN RECORDED = [[item.recorded]] </p>-->
                        </div>
                      <!--</div>-->
                  </div>
              </template>




              <vaadin-grid-column width="50px">
                <template class="header">#</template>
                <template>[[index]] - [[item.$key]]</template>
              </vaadin-grid-column>

              <vaadin-grid-column>
                <template class="header">BINTS01</template>
                <!--<template>[[item.BINTS01]]</template>  this works-->
                <template>[[_formatEpochDate(item.BINTS01)]]</template>
              </vaadin-grid-column>

              <vaadin-grid-column>
                <template class="header">LAST SCAN (days)</template>
                <!--<template>[[item.BINTS01]]</template>  this works-->
                <template>[[_formatEpochDate02(item.BINTS01)]]</template>
              </vaadin-grid-column>    

              <vaadin-grid-column>
                <template class="header">BIN FILL</template>
                <template>[[item.Q10_FILL_LEVEL]]</template>
              </vaadin-grid-column>

              <vaadin-grid-column>
                <template class="header">BIN STATUS</template>
                <template>[[item.Q20_BIN_STATUS]]</template>
              </vaadin-grid-column>


<!--I was thinking that perhaps on the SHow details click event, I could refresh the Map screen.
But that still does not solve the scrolling issue.-->

              <vaadin-grid-column width="100px">
                <template class="header"></template>
                <template>
                  <label><input type="checkbox" checked="{{expanded::change}}">Show Details</label>
                </template>
              </vaadin-grid-column>
            </vaadin-grid>


  </template>

  <script>
    Polymer({
      is: 'my-view9',

      properties:{
          eTS : String,
          },
      _formatEpochDate: function(eTS){
              // return eTS
              var d = new Date(eTS);
              var n = d.getUTCDay();
              return d.toDateString()
           },
      _formatEpochDate02: function(eTS){
              var d1 = Date.now();  
              var d3 = (d1 - eTS);        
              var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
              var diffDays = Math.abs(d3 / (oneDay));
              return Math.floor(diffDays) //days
           },

      _onActiveItemChanged: function(e) {
        this.$.grid.expandedItems = [e.detail.value];
      }

    });
  </script>
</dom-module>