designer

designer.html

<link rel="import" href="../paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-appbar/paper-appbar.html">
<link rel="import" href="../google-map/google-map.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../google-map/google-map-search.html">

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

  <template>
    <style>    
      #paper_drawer_panel {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
      }
      #paper_panel {
        display: block;
        background-color: rgb(254, 253, 255);
      }
      #paper_panel1 {
        height: 100%;
        box-sizing: border-box;
        display: block;
      }
      #google_map {
        width: auto;
        height: 100%;
        display: block;
      }
      #paper_input {
        display: block;
        padding: 20px;
      }
      #paper_tabs {
        width: auto;
        padding: 20px;
      }
      #paper_appbar {
        right: 0px;
        color: rgb(215, 229, 252);
        background-color: rgb(66, 133, 244);
      }
      #paper_appbar1 {
        right: 0px;
        color: rgb(215, 229, 252);
        background-color: rgb(66, 133, 244);
      }
    </style>
    <paper-drawer-panel selected="main" id="paper_drawer_panel" responsivewidth="640px" defaultselected="main">
      <paper-panel id="paper_panel1" main>
        <paper-appbar theme="core-light-theme" id="paper_appbar1" class="core-light-theme">
          <paper-icon-button icon="menu" id="paper_icon_button" class="core-light-theme"></paper-icon-button>
          <div id="div3" core-flex></div>
        </paper-appbar>
        <google-map latitude="{{ $.google_map_search.result.latitude }}" longitude="{{ $.google_map_search.result.longitude }}" zoom="18" showcentermarker="true" maptype="{{ $.paper_tabs.selected }}" id="google_map" version="3.exp"></google-map>
      </paper-panel>
      <paper-panel id="paper_panel" drawer>
        <paper-appbar theme="core-light-theme" id="paper_appbar" class="core-light-theme tall">
          <div id="div2" core-flex>My App</div>
        </paper-appbar>
        <paper-tabs selected="roadmap" valueattr="textContent" selectedindex="0" id="paper_tabs" responsivewidth="480px" selectedclass="core-selected" selectedattribute="active" activateevent="tap">
          <div id="div" class="core-selected" active>roadmap</div>
          <div id="div1">satellite</div>
        </paper-tabs>
        <paper-input label="Search Place" floatinglabel="true" value="Eiffel Tower" committedvalue="Eiffel Tower" id="paper_input"></paper-input>
        <google-map-search query="{{ $.paper_input.committedValue }}" map="{{ $.google_map.map }}" id="google_map_search"></google-map-search>
      </paper-panel>
    </paper-drawer-panel>
  </template>

  <script>

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

  </script>

</polymer-element>