designer

designer.html

<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../core-field/core-field.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-input/core-input.html">
<link rel="import" href="../google-map/google-map.html">

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

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #google_map {
        width: 400px;
        height: 400px;
        display: block;
        left: 30px;
        top: 30px;
        position: absolute;
      }
      #paper_slider {
        left: 450px;
        top: 60px;
        position: absolute;
      }
      #paper_slider1 {
        left: 450px;
        top: 150px;
        position: absolute;
      }
      #paper_slider2 {
        left: 450px;
        top: 240px;
        position: absolute;
      }
      #core_field {
        left: 470px;
        top: 220px;
        position: absolute;
      }
      #core_input {
        left: 470px;
        top: 220px;
        position: absolute;
      }
      #core_field1 {
        left: 460px;
        top: 120px;
        position: absolute;
      }
      #core_input1 {
        left: 470px;
        top: 130px;
        position: absolute;
      }
      #core_field2 {
        left: 460px;
        top: 30px;
        position: absolute;
      }
      #core_input2 {
        left: 470px;
        top: 40px;
        position: absolute;
      }
    </style>
    <paper-slider immediatevalue="35" value="{{ $.google_map.latitude }}" min="-90" max="90" id="paper_slider"></paper-slider>
    <paper-slider immediatevalue="137" value="{{ $.google_map.longitude }}" min="-180" max="180" id="paper_slider1"></paper-slider>
    <paper-slider immediatevalue="10" value="{{ $.google_map.zoom }}" max="30" id="paper_slider2"></paper-slider>
    <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
      </core-field>
    <core-input placeholder="text input" inputvalue="Zoom" value="Zoom" id="core_input" flex></core-input>
    <core-field id="core_field1" icon="search" theme="core-light-theme" center horizontal layout>
      </core-field>
    <core-input placeholder="text input" inputvalue="Longitude" value="Longitude" id="core_input1" flex></core-input>
    <core-field id="core_field2" icon="search" theme="core-light-theme" center horizontal layout>
      </core-field>
    <core-input placeholder="text input" inputvalue="Latitude" value="Latitude" id="core_input2" flex></core-input>
    <google-map latitude="35.18" longitude="136.9" disabledefaultui id="google_map"></google-map>
  </template>

  <script>

    Polymer('my-element', {
      
    });

  </script>

</polymer-element>