designer

designer.html

<link rel="import" href="../google-map/google-map.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        width: 100%;
        height: 100%;
        position: absolute;
        box-sizing: border-box;
      }
      #google_map {
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        position: absolute;
      }
      #paper_button {
        left: 310px;
        top: 60px;
        position: absolute;
      }
      #paper_button1 {
        left: 360px;
        top: 30px;
        position: absolute;
      }
    </style>
    <google-map latitude="90" longitude="100" fittomarkers id="google_map">
    </google-map>
  </template>

  <script>

    Polymer({
      ready: function () {
        this.startUpdateMarkers();
      },
      randomMarkers: function () {
        this.markers = [];
        for (i = 0; i < Math.random() * 10; i ++) {
          markers[i] = {
            longitude: Math.random() *100,
            latitude: Math.random() * 100,
            name: 'marker ' + i
          }
        }
      },
      startUpdateMarkers: function () {
        this.randomMarkers();
        this.async(function() {
          this.startUpdateMarkers();
        }, null, 1500);
      }
    });

  </script>

</polymer-element>